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/)

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...