在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>

我想选择第二个选项，但我感觉以后会给我带来麻烦。

你能给出一些建议或见解吗？

- Sinan

---

单元格宽度不正常？它能正常工作吗？ - Muhammad Umer

Answer 1

display: table-cell 很好用，只有一个缺点..

它在IE7中无法使用（或者IE6，但是谁在乎呢？）：http://caniuse.com/#search=css-table

如果您不需要支持IE7，则可以放心使用它。

IE7仍然有一些用户群体，但是您应该检查您的分析数据，然后做出决定。

---

针对你的特定用例，如果你不需要根据内容调整height，则可以在不使用display: table-cell的情况下完成：

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/相比，不使用的区别在哪里http://jsfiddle.net/g6yB4/4/？

- thirtydot

---

+1 对于 caniuse.com 的提及，我之前没有听说过，但它看起来非常棒。 - Kalessin

在这种情况下，使用一个仅限IE7的样式表是合适的。让旧的丑陋浏览器使用float:left，其他人使用display:table-cell。 - Blazemonger

+1 代表另一种解决方案（float:left + overflow:hidden）。这里也有解释：https://dev59.com/b3M_5IYBdhLWcg3wt1k0#1767270。 - R. Oosterholt

我非常喜欢这种技术。我遇到的唯一问题是当我尝试在table-cell元素内使用position:absolute;定位某些内容时，它在IE8上无法正常工作，而我不记得我们是否在IE9上也遇到了同样的问题。但除此之外，我从未遇到过任何问题。 - Jair Reina

移动设备支持怎么样？ - siddhesh

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>

- Sam

---

这有点不太正规，我想继续使用表格属性。谢谢。 - Sinan

它可能看起来不太美观，但对我们来说很有效。显然，我们不会在HTML中保留样式...我们使用样式表。我为了简洁起见将它们放在了上面的代码中。我们使用它是因为它具有广泛的浏览器支持，并且允许将我们的“重要”内容推到页面的更高位置以用于SEO目的。有人知道是否使用表CSS类会导致与表格相同类型的渲染延迟吗（表格需要加载所有内容才能显示整个表格）？ - Sam

我使用内联样式使问题更易理解和更短，当然你的方法是使用类。我不知道那个显示问题，但是通过一些逻辑思考，使用带有表格属性的div不会导致这样的问题，因为浏览器需要加载表格直到关闭</table>标签才能理解布局。这在div中不应该出现这种情况。 - Sinan

如果您使用此方法，您将不得不在包含的 div 上使用背景图像来伪造等长列。 - rxgx

还有一个技巧是添加非常大的底部填充和非常大的负底部边距。http://www.positioniseverything.net/articles/onetruelayout/equalheight - Sam

Answer 3

使用table-row的一个缺点（与OP非常相关）是您无法在行上使用margin/padding。

- rob_james

Answer 4

要使第一个示例正常工作，您还应该将包含的 div 浮动起来，这将确保其中的两个元素按照您希望的方式放置在其中。不过，“is a pain”是什么意思呢？

- cchana