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

Question

我一直在论坛上寻找，我找不到类似的问题。在我看来，一个简单的溢出：隐藏可以解决这个问题，但它不起作用...

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

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

问题是我不想让侧面的div保持在中间div的后面，因为我要对这些图像进行“覆盖”操作，使其具有一点透明度。而且背景图像（森林）应该是可见的，因此侧面divs不应该占据中间div后面的任何空间。

Answer 1

您可以使用CSS表布局来实现这一点。

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

这也可以通过使用display:flex实现，但目前，CSS表格布局具有更好的浏览器支持（IE8）

工作小提琴

超文本标记语言：

<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，因此如果有大量文本需要拆分成行，请将