0

在这里寻找一些关于如何最好地设置以下 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 将有一个右边框来设置它与第二个/右 div , 并且这个边框应该是 .parent div 的高度；但是，第一个/左 div 并不总是出现在标记中，在这种情况下边框不应该出现）。
  • 我不能使用 JavaScript 诡计。

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

  1. Float：使用 float:left 的传统方法显然无法将第一个/左 div 拉伸到其兄弟或 .parent 的（可变）高度。

  2. 内联块：.parent {background-color:#999999;} .parent > .child {display:inline-block;vertical-align:top;height:100%;}

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

任何见解将不胜感激！

4

2 回答 2

1

Using table based markup is not the answer. However, iff you don't need to support IE7 or lower, you can use display:table to solve this. Check out this demonstration i threw together. Edit the amount of content in the second child div to see the effect.

jsfiddle demonstrating display:table

.parent {
  display:table;
}

.child {
  display:table-cell;
}

Basically, you tell the parent element to act like a table, the two child elements to act like table cells. This gives you the benefits of the table layout without the accessibility problems and extra markup of html tables. As I mentioned though, this doesn't work in IE7. If you need old IE support, you'll have to resort to less graceful workarounds :(

于 2012-11-14T04:10:09.833 回答
0

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

<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>

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

于 2012-11-14T02:56:14.480 回答