使用 CSS display:inline-block 或 float:left 与混合数量的文本答案

【问题标题】：Using CSS display:inline-block or float:left with mixed amounts of text使用 CSS display:inline-block 或 float:left 与混合数量的文本
【发布时间】：2012-11-14 02:29:25
【问题描述】：

在这里寻找一些关于如何最好地设置以下 HTML 样式的专家建议：

<body>
-Some content-
<div class="parent" style="height:50%;">
<div class="child" style="background-color:#FF9999;">An image</div>
<div class="child" style="background-color:#9999FF;">Some text</div>
</div>
</body>

要获得如下行为的结果：

我使用的标准如下：

容器 div .parent 是一个块元素，填充了浏览器窗口的整个宽度。
我知道第一个/左内部 div 的宽度，以像素为单位，但不是百分比，这取决于将去那里的图像的规律性。
我不知道第二个/右侧内部 div 的宽度 - 因为它包含可变数量的文本，应该自动填充右侧的整个空间，无论浏览器窗口宽度如何
第一个/左 div 的高度，当短于第二个/右 div 时，应该拉伸到相同的高度（原因如下：第一个/左 div 将有一个右边框来设置它与第二个/右/right div，并且这个边框应该是 .parent div 的高度；但是，第一个/左 div 并不总是出现在标记中，在这种情况下边框不应该出现）。
我不能使用 JavaScript 诡计。

根据我的经验和网络资源的帮助，我尝试过的解决方案：

浮点数：使用 float:left 的传统方法显然无法将第一个/左 div 拉伸到其兄弟或 .parent 的（可变）高度。
内联块： .parent {背景颜色：#999999;} .parent > .child {display:inline-block;vertical-align:top;height:100%;}

当第二个/右 div 中的文本不足以填满整行时，使用 display:inline-block 似乎很有效。然而，当有更多文本时，第二个/右 div 会增长到外部容器允许的宽度，迫使它包裹在第一个/右 div 下。

任何见解将不胜感激！

【问题讨论】：

标签： css-float css

【解决方案1】：

使用基于表格的标记不是答案。但是，如果您不需要支持 IE7 或更低版本，您可以使用display:table 来解决此问题。看看我放在一起的这个演示。编辑第二个子div中的内容量，看看效果。

jsfiddle demonstrating display:table

.parent {
  display:table;
}

.child {
  display:table-cell;
}

基本上，您告诉parent 元素充当表格，两个child 元素充当表格单元格。这为您提供了表格布局的好处，而没有 html 表格的可访问性问题和额外标记。正如我所提到的，这在 IE7 中不起作用。如果您需要旧的 IE 支持，您将不得不求助于不太优雅的解决方法:(

【讨论】：

谢谢！我很幸运，我猜我不需要 IE 支持（我正在 Chrome 中进行测试，但这主要针对 iPhone 和其他具有现代浏览器的移动设备）。使用 display:table 和 display:table-cell 是一个简单而优雅的解决方案，符合我的标准/约束（我应该添加的，没有表格标记！）。我在寻找解决方案时遇到了它，它与 display:inline-block 一起记录，但由于我仍然与实际表格相关联的污名而回避了它。不用了 - 再次感谢您的帮助，我需要轻推！
很高兴它对你有用。由于您提到主要针对移动设备，您还可以查看flexible box model。桌面浏览器支持一直很粗略，但我听说移动浏览器实际上应该对它有不错的支持。它为您提供了很多选项来解决布局问题。
灵活的盒子，嗯？我必须住在岩石下。非常有趣...感谢分享该链接！

【解决方案2】：

虽然表名声不好，但这对一个人来说是一个很好的应用程序。

<body>
    -Some content-
    <table class="parent" style="height:50%;">
        <tr>
            <td class="child" style="background-color:#FF9999;" width="10">An image</td>
            <td class="child" style="background-color:#9999FF;">Some text</td>
        </tr>
    </table>
</body>

如果您将宽度设置为最小，即使内容较大，它也会将您的内容推过，并且无论哪一列较高，都会将整个内容框向下推。

【讨论】：

感谢您的建议-尽管我真的很想远离表格标记。最后，我选择了基于 CSS 的表格（使用其他求解器对 display:table 和 display:table-cell 的建议 - 我曾经考虑过作弊，但从根本上说，你是正确的，因为某些情况只是需要一张桌子）。既然我知道如何将表格标记排除在我的代码之外，那么经过这么多年的回避，我可能会重新开始使用它们！