具有流体高度的表格行跨度的 CSS 等效项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2611083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Equivalent of Table Rowspan with Fluid Height
提问by Gabe Sumner
I'm trying to accomplish the following using CSS:
我正在尝试使用 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>
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 来实现这一点？
采纳答案by Paul de Vrieze
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:
首先，你正在做的事情对我来说就像一张桌子，所以你可能需要考虑一下。然而，用 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>
Table cells in CSS are easier:
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>
回答by Tomas Tomecek
I needed something very similar. Unfortunately all these solutions are pretty complex, I came with something very simple (maybe too simple) -- used display: inline-block
我需要一些非常相似的东西。不幸的是，所有这些解决方案都非常复杂，我带来了一些非常简单（可能太简单）的东西——使用display: inline-block
HTML
HTML
<div>
<span id="v">
text in the left
</span>
<div id="x">
<div>upper row</div>
<div>lower row</div>
</div>
</div>
CSS
CSS
#x {
display: inline-block;
vertical-align: middle;
}
回答by Kevin Wiskia
This is what I use: http://www.ejeliot.com/samples/equal-height-columns/example-7.html
这是我使用的：http: //www.ejeliot.com/samples/equal-height-columns/example-7.html
I'd just use the second column as a wrapper for the other two elements (less-semantic). That should be the easiest way.
我只是将第二列用作其他两个元素的包装器（语义较少）。这应该是最简单的方法。
