Question

我想要完成的是拥有一个固定宽度的第一个div和一个流动的第二个div，它将填充父div宽度的剩余宽度。

<div class='clearfix'>
  <div style='float:left; width:100px;'>some content</div>
  <div style='float:left'>some more content</div>
</div>

在这一点上，一切似乎都很好，也很流畅。

<div style='display:table'>
  <div style='display:table-cell; width:100px;'>some content</div>
  <div style='display:table-cell'>some more content</div>
</div>

我想继续第二个，但我觉得第二个例子将来会给我带来麻烦。

您能提供一些建议或见解吗？

Answer 1

display: table-cell完全可以使用，只有一个缺点..

它在IE7（或IE6，但谁关心？）中不起作用：http://caniuse.com/#search=css-table

如果您不需要支持IE7，请随时使用它。

IE7仍然有some usage，但您应该检查自己的Google Analytics，然后做出决定。

要回答特定的用例，只要您不需要display: table-cell调整，可以在没有height的情况下执行此操作基于内容：

http://jsfiddle.net/g6yB4/

<div class='clearfix'>
  <div style='float:left; width:100px; background:red'>some content</div>
  <div style='overflow:hidden; background:#ccc'>some more content</div>
</div>

（为什么overflow: hidden？使用：http://jsfiddle.net/g6yB4/3/ vs没有：http://jsfiddle.net/g6yB4/4/）

Answer 2

你可以这样做。它将您的主要内容放在首位。您可以在主“内容”容器上使用垂直重复的css背景图像，以创建在左列中一直运行的背景幻觉。

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
</div>

延伸至带有流体中心的3列：

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px; margin-right:100px;">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
    <div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
        Right content here
    </div>
</div>

Answer 3

要使第一个示例正常工作，您还应该浮动包含div，这将确保其中的两个元素都符合您的预期。但是，不确定你的意思是'痛苦'吗？

Answer 4

使用表格行（与OP非常相关）的一个缺点是你不能在行上使用边距/填充。

是否有使用`display：table-cell`on divs的缺点？

4 个答案: