我正在尝试使用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来做是有点棘手(除非你在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>
