首先,你在做什么看起来像一张桌子给我,所以你可能要考虑这一点。然而,用CSS做这件事有点棘手(除非你在CSS中做表格样式)。下面的代码工作,但不会在框中垂直居中文字:
<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
<div style="float:right; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
<div style="border: 1px solid black; margin-right: 102px;">
<div>
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="clear: right; margin-bottom: -1px;"></div>
</div>
</div></body></html>
在CSS表细胞更容易:
<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
<div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="display: table-cell; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
</div>
</body>
</html>
This非常接近。例如,我注意到,当左栏包含的文本多于右栏2列时,右栏不会自动展开以吸收额外的空间。这种行为存在于表中。无论如何,我感谢你的回答。 – 2010-04-13 21:52:09
你说得对。通常不能使浮动高度依赖于另一个值。将表格作为表格样式可能是最好的解决方案,应该仍然具有不使用html表格的优点。唯一的问题是它在IE <8中不起作用。你可能想使用一个有条件的样式表(仅在IE中支持)为IE做其他事情。 – 2010-04-14 08:36:27