Html 在 div 上使用 `display:table-cell` 有什么缺点吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6307934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a disadvantage of using `display:table-cell`on divs?
提问by Sinan
What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.
我想要完成的是有一个固定宽度的第一个 div 和一个流动的第二个 div，它将填充父 div 宽度的其余宽度。
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
and on this one everything seems alright and fluid.
在这一点上，一切似乎都很好且流畅。
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
I want to go ahead with the second one but i feel like the second example will give me headaches in the future.
我想继续第二个，但我觉得第二个例子将来会让我头疼。
Could you offer some suggestions or insights?
你能提供一些建议或见解吗？
回答by thirtydot
display: table-cellis perfectly fine to use, with just one downside..
display: table-cell非常好用，只有一个缺点..
It doesn't work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table
它在 IE7（或 IE6，但谁在乎？）中不起作用：http: //caniuse.com/#search=css-table
If you don't need to support IE7, then feel free to use it.
如果您不需要支持 IE7，那么请随意使用它。
IE7 still has some usage, but you should check your Analytics, and then make a decision.
IE7 仍然有一些用法，但你应该检查你的分析，然后再做决定。
To answer your specificuse case, you cando it without display: table-cell, provided that you don't need the heightto adjust based on content:
要回答您的特定用例，您可以不使用display: table-cell，前提是您不需要height根据内容进行调整：
<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/vs without: http://jsfiddle.net/g6yB4/4/)
（为什么overflow: hidden？有：http: //jsfiddle.net/g6yB4/3/与没有：http: //jsfiddle.net/g6yB4/4/）
回答by Sam
You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.
你可以做这样的事情。它将您的主要内容放在首位。您可以在主“内容”容器上使用垂直重复的 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>
To extend to a 3-column with fluid center:
要扩展到具有流体中心的 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>
回答by rob_james
One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.
使用 table-row（与 OP 非常相关）的一个缺点是您不能在一行上使用边距/填充。
回答by cchana
To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?
为了使第一个示例工作，您还应该浮动包含的 div，这将确保其中的两个元素都按照您的预期位于其中。不过，不太确定你所说的“是一种痛苦”是什么意思？
