HTML/CSS : 3 columns, 可变边和固定居中中间列

Question

我的问题是标题。所以我基本上有 3 列 div。我希望中间的宽度恒定为 980px，然后我希望页眉的左侧延伸到浏览器窗口的末尾，背景色为蓝色。至于标题的右侧，我希望它以黑色背景颜色延伸到浏览器右侧的末尾。它看起来像这样:

<----------------------------[蓝色][中心标题][黑色]----- ---------------------->

我已经完成研究，到目前为止我能找到的只有两列，左列固定，右列填充其余空间。我想知道如何将其应用于我的问题？

会不会像:

<div style="width:100%;">
     <div style="display:table-cell; background-color:blue;"></div>
     <div style="width: 980px;">my header</div>
     <div style="display:table-cell; background-color:black;"></div>
</div>

谢谢!

Answer 1

一个简单的解决方案 - 基本上使用您的确切样式，但在中央 table-cell 元素中放置另一个 block，像这样 跨度:

<div class="wrapper">
   <div class="left"></div>
   <div class="center"><span>my header</span></div>
   <div class="right"></div>
</div>

我将所有内联样式移动到一个单独的 CSS block 并使用了类选择器:

.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:50%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:50%;
    background-color:black;
}
.center {
    display:table-cell;
}
.center span {
    display:inline-block;
    width:900px;
}

这是一个jsfiddle

在这里，为了更好的展示，我将中心缩小了很多:jsfiddle

希望这有帮助 =)