html - 如何使第二个相邻的 div 具有填充父容器的自动宽度

Question

<div class="parent clearfix" style="width:100%; height: 100px">

<div style="float: left; width:150px; height: 50%">
</div>

<div style="float: left;" class="target">
</div>

</div>

我想让类 'target' div 的宽度比具有类 'parent clearfix' 的 div 的宽度小 150px

我该如何做到这一点？在上面的示例中，父 div 是另一个具有指定宽度的 div 的子元素（此指定宽度可以更改）。

Answer 1

您可以display: table为父母和display: table-cell孩子使用（小提琴）。

<div style="width:100%; height: 100px; display: table">
    <div style="display: table-cell; width:150px; height: 50%">
    </div>
    <div style="display: table-cell;">
    </div>
</div>

但它不适用于旧版浏览器。

更新

另一种方法是给margin-left: 150px第二列a position: absolute，给第一列a。这适用于大多数浏览器，但当然它不是一个干净的版本，如果第一列的内容比第二列长，你会遇到麻烦。小提琴。

Answer 2

它应该只在 width: calc(100%-150px) 支持 CSS3 的浏览器中被支持

Answer 3

查看http://alistapart.com/article/holygrail以获得半流体布局。我认为这正是您正在寻找的。