html - 有没有办法使 2 列布局在两个方向上拉伸(stretch)？

Question

我有以下场景: 由 div A 和 B(按此顺序)组成的两列布局，并以页面为中心的包装 div 包裹。我希望 B 水平拉伸(stretch)到 100% - length_of_A(A 的长度根据其内容而变化)，并且两个 div 都垂直拉伸(stretch)以填充高度。如果 A 比 B 长，则 B 会拉伸(stretch)，否则 - A 会拉伸(stretch)。

我尝试使用宽度和高度以及位置和溢出值进行试验，但无法正常工作。我如何实现这样的目标？

Answer 1

不幸的是，我知道没有跨浏览器的解决方案可以使用 div 来做到这一点，但是您可以使用如下表格来做到这一点:

<table style="width: 100%; border-collapse: collapse;"><tr>
    <td id="A"> <h1 style="white-space: nowrap;">...content...</h1> </td>
    <td id="B"> ...content... </td>
</tr></table>

您应该应用“white-space: nowrap;”所有那些应该控制 A 列宽度的元素。 这应该可以在所有常见的浏览器中使用。