3个div，并排，中心一个水平对齐，另一个占用剩余空间而不是中心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>标记。