Question

在这里寻找一些关于如何最好地设计以下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>

获得行为如下的结果：

enter image description here

我正在使用的标准如下：

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

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

浮子：使用float的传统方法：left让我显然无法将第一个/左边div拉伸到其兄弟或.parent的（变量）高度。
内嵌块： .parent {background-color：＃999999;} .parent＆gt; .child {display：inline-block; vertical-align：top; height：100％;}

使用display：当第二个/右边div中的文本不足以填满整行时，inline-block看起来像魅力。然而，当有更多文本的时候，第二个/右边的div增长到外部容器允许的宽度，迫使它包裹在第一个/右边的div下。

非常感谢任何见解！

Answer 1

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

jsfiddle demonstrating display:table

.parent {
  display:table;
}

.child {
  display:table-cell;
}

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

Answer 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显示：inline-block或float：left，包含大量文本

2 个答案: