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>

我想上课＆＃39;目标＆＃39; div是这样的，它的宽度比div的宽度小150px，并且有类＆＃39; parent clearfix＆＃39;

我如何做到这一点？在上面的例子中，父div是具有指定宽度的另一个div的子节点（这个指定宽度的位可以改变）。

Answer 1

您可以将display: table用于父级，将display: table-cell用于子级（Fiddle）。

<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，向第一列提供position: absolute。这适用于大多数浏览器，但当然它不是一个干净的版本，如果第一列内容比第二列长，你会遇到麻烦。 Fiddle

Answer 2

应该是公正的 width: calc(100%-150px) 仅支持CSS3支持的浏览器

Answer 3

看一下http://alistapart.com/article/holygrail的半流体布局。我认为这正是你要找的。

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

3 个答案:

更新