我想要实现的是拥有一个固定宽度的第一个 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>
我想继续第二个例子，但我觉得第二个例子将来会让我头疼。
您能提供一些建议或见解吗？
display: table-cell使用起来非常好，只有一个缺点..
它在 IE7（或 IE6，但谁在乎呢？）中不起作用：http://caniuse.com/#search=css-table http://caniuse.com/#search=css-table
如果您不需要支持IE7，那么请随意使用。
IE7仍然有一些用法 http://gs.statcounter.com/#browser_version-ww-monthly-201005-201105，但您应该检查您的分析，然后做出决定。
来回答您的specific用例，你can做没有display: table-cell，前提是您不需要height根据内容进行调整：
http://jsfiddle.net/g6yB4/ 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>
(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ http://jsfiddle.net/g6yB4/3/与没有：http://jsfiddle.net/g6yB4/4/ http://jsfiddle.net/g6yB4/4/)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
