具有流体高度的表格行跨度的CSS等效值_Css_Html Table_Css Tables

具有流体高度的表格行跨度的CSS等效值

css

具有流体高度的表格行跨度的CSS等效值,css,html-table,css-tables,Css,Html Table,Css Tables,我正在尝试使用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

我正在尝试使用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实现这一点？

这就是我所使用的：

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

< P>首先，你所做的看起来像是我的一张桌子，所以你可能想考虑一下。但是，使用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>

Test2
下面是一些示例文本。和一些额外的示例文本。
下面是一些示例文本。和一些额外的示例文本。
此列应等于右侧两行的高度（不允许固定高度）。

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
此列应等于右侧两行的高度（不允许固定高度）。
下面是一些示例文本。和一些额外的示例文本。
下面是一些示例文本。和一些额外的示例文本。

我需要类似的东西。不幸的是，所有这些解决方案都非常复杂，我提供了一些非常简单（可能太简单）的解决方案——使用

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>

这非常接近。例如，我注意到，当左列包含的文本多于两列右列的总和时，右列不会自动展开以吸收多余的空间。表存在这种行为。无论如何，我感谢你的回答，你是对的。您通常不能使浮动高度依赖于另一个值。将stuff样式化为表可能是最好的解决方案，它仍然具有不使用html表的优点。唯一的问题是它在IE中不起作用

和

都是可怕的ID

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