CSS顯示錶字幕導致垂直佈局

#container { 
 
    width: 960px; 
 
    height: 960px; 
 
    background-color: #ccc; 
 
} 
 
.box { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
    display: table-caption; 
 
    border: 0; 
 
}

<div id='container'> 
 
    <span class='box'>Content</span> 
 
    <span class='box'>Content</span> 
 
    <span class='box'>Content</span> 
 
    <span class='box'>Content</span> 
 
</div>

Table Caption Fiddle Demo

現在，當我改變table-caption到table-cell它呈現水平。下面是它的演示。

Table Cell Fiddle Demo

任何理由的不同呈現的？

來源

2016-03-12 Robert Rocha

..什麼？ 'table-caption'呈現它像一個''元素（它垂直顯示）。'table-cell'就像是一個''元素（水平顯示）。 – MortenMoulder

，應該只有一個表格標題每個容器...，只是使用顯示：塊在這裏:)我沒有看到的重點，除非更多的代碼丟失 –

@哈里我知道:)雙重引號是最常見的HTML，但也可以使用單一樣式。這是寫在http://www.w3schools.com/html/html_attributes.asp這個頁面。所以我將單引號改爲雙引號。 :)順便說一下，重點是沒有區別。 :) –

以下是規範說，關於display: table-caption：

表標題（在HTML：CAPTION）

指定表的標題。所有帶有'display：table-caption'的元素都必須被渲染，如17.4節所述。

這裏是什麼section 17.4說，有關的標題框渲染：

的標題框是保留自己的內容，填充，保證金，以及邊境地區，並塊級盒呈現爲表格包裝盒內的正常塊框。

的關鍵部分是，它們都呈現爲正常塊盒，並因此它們中的每一個顯示下方的其他（如在，在他們自己的行）。

其他注意事項：

與display: table父容器（我與GCyrillus在評論中討論的摘要）不需要一個孩子有display: table-cell或display: table-caption。您可以在this SO thread
中找到更多詳細信息並參考規範的相關部分。理想情況下，應該只有每張表只有一個標題。用戶代理可能不希望在同一父/表下提供多個標題，這可能解釋了爲什麼Firefox將其與Chrome區別開來。但有關這方面的細節超出了本答案的範圍（在我看來），因爲該問題僅詢問爲什麼顯示：表格標題導致垂直佈局。
I 與GCyrillus一致，使用display: table-caption在同一父親下的多個元素上肯定是不好的做法。我相信你在試圖學習的過程中正在進行反覆試驗。

來源

2016-03-12 13:30:14 Harry

**你注意到FF中只顯示了1個boxe ** ...所有4個堆疊在另一個之上;）https://jsfiddle.net/qustLsdz/ –

@GCyrillus：這是一個很好的討論。所以感謝它:) – Harry

CSS顯示錶字幕導致垂直佈局

回答

相關問題