3 列固定标题，可扩展高度以适应内容

Question

我正在尝试在页面顶部创建一个有 3 个"列"的固定标题。第一个在左侧左对齐，第二个相对于整个页面居中 - 无论其他两个列大小如何，第三个是右对齐的，卡在右侧。我希望所有内容都垂直居中。

浮子并没有真正起作用，因为中间列没有正确居中。所以我在左右两个position: absolutediv，只在中间留下一个div。

我的问题是我无法让标题展开以包含更高的左侧div，并且我无法让内容垂直居中。

我做错了什么？谢谢！

这是我的代码：

.header {
z-index: 8;
top: 0;
left: 0;
position: fixed;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
background: white;
z-index: 8;
border-bottom: 1px solid black;
text-align: center;
}
.left {
position: absolute;
top: 1rem;
left: 1rem;
border: 1px solid gray;
background: red;
padding: 1rem;
height: 10rem;
}
.right {
position: absolute;
right: 1rem;
top: 1rem;
background: yellow;
border: 1px solid gray;
}
.middle {
background: green;
border: 1px solid gray;
}

<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>

这是我的小提琴的链接。

Answer 1

我建议使用弹性框进行垂直对齐。

header {
display: flex;
justify-content: space-between;
align-items: center;
}
header>div {
padding: 1rem; /* To improve visibility */
width: calc(100% / 3);
}
.col1 {
text-align: left;
}
.col2 {
text-align: center;
}
.col3 {
text-align: right;
}

<header>
<div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>

Answer 2

代替您编写的 css，您只需 8 行即可完成上述操作。您只需要编写以下内容：

.header{
display:flex;
}
.left, .middle, .right{
width: calc(100% / 3);
text-align:center;
}

您可以添加以下类来检查一切是否都按照您的计划进行：

*{
border: 1px solid red;
}

这是显示上述代码结果的小提琴的链接。

检查以下堆栈溢出代码段中的结果：

* {
border: 1px solid red;
}
.header {
display: flex;
}
.left,
.middle,
.right {
width: calc(100% / 3);
text-align: center;
}

<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>