具有流动高度的表格行跨度的 CSS 等效项答案

【问题标题】：CSS Equivalent of Table Rowspan with Fluid Height具有流动高度的表格行跨度的 CSS 等效项
【发布时间】：2011-02-06 08:28:51
【问题描述】：

我正在尝试使用 CSS 完成以下操作：

<table border="1" width="300px">
<tr>
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
<tr>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
</table>

我看到的用于实现此目的的示例使用固定高度或允许内容环绕左列。有没有一种优雅的方式来使用 CSS 来实现这一点？

【问题讨论】：

标签： css html-table css-tables

【解决方案1】：

首先，在我看来，您正在做的事情就像一张桌子，所以您可能需要考虑一下。然而，用 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>

【讨论】：

这非常接近。我注意到，对于您的示例，当左列包含的文本多于 2 个右列的组合时，右列不会自动扩展以吸收额外的空间。表存在此行为。无论如何，我很感激你的回答。
你是对的。您通常不能使浮动高度依赖于另一个值。将这些东西设置为表格可能是最好的解决方案，它仍然具有不使用 html 表格的优点。唯一的问题是它在 IE

【解决方案2】：

我需要一些非常相似的东西。不幸的是，所有这些解决方案都非常复杂，我提供了一些非常简单的东西（也许太简单了）——使用了display: inline-block

HTML

<div>
    <span id="v">
        text in the left
    </span>
    <div id="x">
        <div>upper row</div>
        <div>lower row</div>
    </div>
</div>

CSS

#x {
    display: inline-block;
    vertical-align: middle;
}

fiddle

【讨论】：

v 和 x 是 可怕的 ID。

【解决方案3】：

这是我使用的： http://www.ejeliot.com/samples/equal-height-columns/example-7.html

我只是将第二列用作其他两个元素的包装器（语义较少）。这应该是最简单的方法。

【讨论】：

死链接死链接