3 个 div，并排，居中 1 个水平对齐，其他占据剩余空间，不在居中 div 后面

Question

我一直在寻找论坛，但找不到类似的问题。在我看来，一个简单的overflow:hidden 可以解决这个问题，但它不起作用......

我在这里创建了一个示例： http://www.estrelasustentavel.pt/demo

所以，它希望让“边”divs（左右）占据中心 div 留下的所有空间（水平对齐）。中心 div 的大小可以有一个固定的宽度，但最好不要....

问题是我不希望侧面divs 留在中心 div 后面，因为我将对这些图像进行“过度”操作以具有一点透明度。并且背景图像（森林）应该是可见的，所以边 divs 不应该占据中心 div 后面的任何空间。

Answer 1

您可以使用 CSS 表格布局来实现。

在这个演示中，第二个 div 恰好占据了他需要的空间，而第一个和第三个 div 占据了其余部分。

也可以通过display: flex实现，不过目前CSS表格布局对浏览器支持更好（IE8+）

Working Fiddle

HTML：

<div class="Row">
    <div class="Stretch">First</div>
    <div class="Content">second will always occupy as much as he can</div>
    <div class="Stretch">Third</div>
</div>

CSS：

.Row
{
    width: 100%;
    display: table;
    border-spacing: 5px;
}

.Row > div
{
    display: table-cell;
    background-color: #e5b9b9;
}
.Content
{
    white-space: nowrap;
}
.Stretch
{
    width: 50%;
}

在解决方案中，我在第二个 div 上使用 nowarp， 因此，如果您有很多需要分行的文本，请添加</br> 标签。