Html 在div上使用'display:table cell'是否有缺点？

我试图实现的是有一个固定宽度的第一个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>

一些内容
更多内容

我想继续第二个例子，但我觉得第二个例子将来会让我头疼

---

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

显示：表格单元格

非常好用，只有一个缺点

它在IE7（或IE6，但谁在乎呢？）中不起作用：

如果您不需要支持IE7，那么可以随意使用它

IE7仍然有，但你应该检查你的分析，然后做出决定

---

要回答您的特定用例，您可以不使用

display:table cell

，前提是不需要根据内容调整

高度：



一些内容
更多内容

（why
overflow:hidden
？With:vs without:）
要使第一个示例正常工作，还应该浮动包含的div，这将确保其中的两个元素都像您期望的那样位于其中。不过，我不太确定你所说的“疼痛”是什么意思？
你可以这样做。它把你的主要内容放在第一位。您可以在主“内容”容器上使用一个垂直重复的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>


这里的主要内容
在这里留下内容
正确的内容在这里
使用表格行（与OP非常相关）的一个缺点是不能在一行上使用边距/填充。
+1用于参考caniuse.com，这是我从未听说过的，看起来非常棒。在这种情况下，可以使用An。让丑陋的旧浏览器使用
float:left
，其他人使用
display:table cell
+1作为替代（float:left+overflow:hidden）。我也解释过。我非常喜欢这种技术。我唯一遇到的问题是当我试图用位置来定位某个东西时：绝对；表单元格元素的内部。它在IE8上不起作用，我不记得我们在IE9上是否也有同样的问题。但除此之外，我从来没有遇到过任何问题。移动设备的支持呢？这有点黑客，我想继续使用桌面道具。thx。它看起来可能不漂亮，但对我们来说很好用。显然，我们不会将样式附加在HTML中…我们使用样式表。为了简洁起见，我把它们放在上面的代码中。我们之所以使用它，是因为它具有广泛的浏览器支持，并允许出于SEO目的将我们的“重要”内容推到页面更高的位置。是否有人知道使用表格CSS类是否会导致与表格相同类型的呈现延迟（表格需要在显示整个表格之前加载所有内容）？我保留了内联样式以使问题更容易理解和缩短，当然，你的方法就是使用类。我不知道这个显示问题，但从逻辑上考虑，将div与table props一起使用不会导致这样的问题，因为在关闭
标签之前，需要加载一个表，以便浏览器理解布局。div不应该是这种情况。如果使用此方法，则必须在包含
div
的页面上使用背景图像来伪造等长列。还有一个技巧是添加非常大的底部填充和非常大的负底部边距。单元格宽度不正常？它起作用了吗？
<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>