CSS等效採用流體高度

我試圖實現以下使用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>

alt text

的例子我已經看到了實現這一利用固定高度或允許內容環繞左列。有沒有一種優雅的方式來完成這個使用CSS？

來源

2010-04-09 Gabe Sumner

首先，你在做什麼看起來像一張桌子給我，所以你可能要考慮這一點。然而，用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>

來源

2010-04-09 22:50:36

This非常接近。例如，我注意到，當左欄包含的文本多於右欄2列時，右欄不會自動展開以吸收額外的空間。這種行爲存在於表中。無論如何，我感謝你的回答。 – 2010-04-13 21:52:09

你說得對。通常不能使浮動高度依賴於另一個值。將表格作爲表格樣式可能是最好的解決方案，應該仍然具有不使用html表格的優點。唯一的問題是它在IE <8中不起作用。你可能想使用一個有條件的樣式表（僅在IE中支持）爲IE做其他事情。 – 2010-04-14 08:36:27

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

我剛剛使用第二列作爲包裝的另外兩個要素（少語義）。這應該是最簡單的方法。

來源

2010-04-09 21:37:11

死鏈接無效鏈接 – Ash 2017-11-17 12:34:57

我需要一些非常相似。不幸的是所有這些解決方案是相當複雜的，我帶着很簡單的東西（也許太簡單） - 使用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

來源

2013-05-03 10:31:13 SummerBreeze

'v'和'x'是*糟糕的* ID。 – Dan 2016-10-28 13:02:16

CSS等效採用流體高度

回答

相關問題