具有流体高度的表Rowspan的CSS等效 [英] CSS Equivalent of Table Rowspan with Fluid Height
问题描述
我正在尝试使用CSS完成以下操作：
I'm trying to accomplish the following using 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实现这一目标？
The examples I've seen for accomplishing this utilize fixed heights or allow the content to wrap around the left column. Is there an elegant way to accomplish this using CSS?
推荐答案
首先，你在做什么看起来像一张桌子给我，所以你可能想考虑一下。然而，使用CSS执行它有点棘手（除非您在CSS中执行表格样式）。以下代码有效，但不会垂直居中于框中的文字：
First of all, what you are doing looks like a table to me, so you might want to consider that. Doing it with CSS however is a bit more tricky (unless you do the table styling in CSS). The following code works but does not center vertically the text in the box:
<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中的表格单元格更容易：
Table cells in CSS are easier:
<!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>
这篇关于具有流体高度的表Rowspan的CSS等效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
