html – 使用`display：table-cell`on divs有缺点吗？

我想要完成的是具有固定宽度的第一个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>

我想继续第二个，但我觉得第二个例子会给我以后的头痛。

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

解决方法

显示：table-cell是完美的使用，只有一个缺点..

它不工作在IE7(或IE6，但谁在乎？)：http://caniuse.com/#search=css-table

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

IE7仍然有some usage，但您应该检查您的Google Analytics(分析)，然后作出决定。

为了回答您的具体用例，您可以在不显示的情况下执行：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？With：http://jsfiddle.net/g6yB4/3/ vs without：http://jsfiddle.net/g6yB4/4/)

原文地址：https://www.jb51.cc/html/232938.html