html - 在 div 上使用 `display:table-cell` 有什么缺点吗？

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还有一些用处，但你应该检查你的分析，然后再做决定。

---

要回答您的特定用例，您可以不使用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

使用 table-row（与 OP 非常相关）的一个缺点是您不能在一行上使用边距/填充。