具有顯示的div的高度：表格單元格

我有兩個彼此相鄰的表格單元格div。正確的高度是75px（我無法改變），左邊的高度需要70px。爲了強制左邊div的高度，我使用了min-height,max-height,height和line-height，但是沒有一個能幫上忙。具有顯示的div的高度：表格單元格

在下圖中，我擁有的是左邊，我需要的是右邊。

我有什麼 .......................... 我需要什麼

enter image description here

是否可以用兩個有display: table-cell;的div來完成？

PS。我需要使用table-cell來完成，所以如果無法完成，請提出其他解決方案。

感謝

來源

2015-05-21 leopik

表細胞在同一行中總是相同的高度。你不能使用嵌套元素而不是設置單元格的高度嗎？ – Turnip

感謝您的評論。看來我最終會這樣做。 – leopik

@AntBlackShaw給出了決定性的提示，我用它製作了一個工作筆，請參閱下面的答案。 – connexo

這是很難有什麼好的解決辦法沒有在這裏充分CSS和HTML審查猜測。

根據你描述的內容在本地嘲笑它;如果我浮動左邊的表格單元div（例如float: left;），然後設置其高度來改變該單元格的高度，但這可能會對您的設置產生其他副作用，這是我在模擬中無法預見的。

我檢查了FireFox和Chromium，並且浮動table-cell div使我可以在兩者中設置不同的高度。

來源

2015-05-21 14:21:31

感謝您的回答。我同意猜測完整的CSS是相當困難的，但我想我最終會將一個元素放入該單元格，並將嵌套元素的高度設置爲所需的值。 – leopik

這適用於Firefox至少：http://codepen.io/anon/pen/LVRjZR我建議你在生產環境中使用它之前先進行瀏覽器測試，因爲我假設表格單元格不是爲了浮動。

.table { 
 
    background-color: #eee; 
 
    border: 1px solid black; 
 
    display: table; 
 
    width: 300px; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    float: left; 
 
    vertical-align: top; 
 
    width: 150px; 
 
} 
 
.cell-a { 
 
    background-color: #a88; 
 
    height: 50px; 
 
} 
 
.cell-b { 
 
    background-color: #8a8; 
 
    height: 75px; 
 
}

<div class="table"> 
 
    <div class="cell cell-a"></div> 
 
    <div class="cell cell-b"></div> 
 
</div>

來源

2015-05-21 14:28:11 connexo

雖然這個_looks_就像它在現實中一樣，但是浮動div會移除「display：table-cell」的單元格屬性。例如，你不能再垂直對齊內容 - http://codepen.io/anon/pen/QbKMGz如果你打算使用固定的寬度和浮點數，你可以使用一個塊元素 – Turnip

這是不可能的，至少直接。

如§17.2.1 Anonymous table objects解釋，你的表細胞是consecutive：

兩個同胞框是連續的，如果他們有沒有介入的兄弟姐妹比，可選的，只包含白色空間的匿名在線等。如果序列中的每個框與序列中的每個框連續，則兄弟框序列是連續的。

因此，它們將產生公用表列和表：

生成丟失父母：

對於每個「表小區」盒下在連續的內部表的序列和'表格說明'兄弟，如果C的父項不是'表格行' ，則生成一個匿名的'表格行'框，圍繞C和所有'C'表格單元格的連續同胞。

對於連續的適當表兒童序列中的每個適當的表格C，如果C不正確，則生成一個匿名的'表' 或圍繞C的所有連續兄弟姐妹「inline-table」框T，表兒童。（若C的父是一個「內聯」框中，則T必須是「直列表」框;否則，它必須是一個「表」框。）

然後，根據§17.5 Visual layout of table contents ，

內部表格元素生成包含內容和邊界的矩形框。 [...]

這些盒子的可視化佈局是由矩形的，不規則的行和列的網格控制的。每個盒子佔據網格單元的整數

你可以假設這個數字是1，這可能是更多，但

CSS 2.1沒有定義如何跨的行或列的數目是確定

然後，兩個單元格將具有相同的高度。

如果你不想這樣做，你可以擺脫display: table-cell並改用其他方法。

例如，您可以考慮使用display: inline-table。如果你的元素裏面沒有其他表格元素，他們將生成匿名錶格單元格來包裝內容。

#foo, #bar { 
 
    display: inline-table; 
 
    border: 3px solid red; 
 
    width: 70px; 
 
} 
 
#foo { height: 30px; } 
 
#bar { height: 75px; }

<div id="foo">Foo</div> 
 
<div id="bar">Bar</div>

或者，如果元素必須是表細胞，你可以將它們之間的非空白內容。這樣他們將不會連續，所以他們會生成不同的表格元素。

但是，請記住，如果單元格的父級是塊，則生成的表格將爲表格框，因此這些單元格將位於不同的行中。爲了避免這種情況，請將單元放置在內聯元素中。通過這種方式，生成的表格將是直列表盒：

body { display: inline; } 
 
#foo, #bar { 
 
    display: table-cell; 
 
    border: 3px solid red; 
 
    width: 70px; 
 
} 
 
#foo { height: 30px; } 
 
#bar { height: 75px; }

<div id="foo">I am a table-cell</div> 
 
<span><!-- I allow the cells to have different heights --></span> 
 
<div id="bar">I am a table-cell</div>

來源

2015-05-21 15:17:52 Oriol

具有顯示的div的高度：表格單元格

回答

相關問題