1

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

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

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

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

4

1 回答 1

1

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

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

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

工作小提琴

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%;
}

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

于 2013-09-29T19:42:55.207 回答