顯示中的塊級元素：內聯塊
[英]Block-level elements within display: inline-block
問題描述
我正在嘗試放置一些（垂直堆疊）顯示：顯示內的塊元素：內聯塊元素。 根據CSS規范，內聯塊元素應該是一個包含塊，因此它可以在其中包含display：block元素，這些元素不應影響布局的其余部分。
但是，display：block元素在顯示內部：inline-block元素會破壞頁面的其余部分; 所以在內聯塊中什么也沒有，甚至像段落這樣的基本元素; 只有簡單的文本才能避免破壞頁面的其余部分（通過中斷我的意思是將其他div向下移動，例如，在這種情況下，左側紅色塊向下移動一行並且在其上方有一個空白空格）。 我正在使用Firefox 3.0.6。
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
}
</style></head><body>
<div id="left">Left</div><div id="right">Right</div>
</body></html>
以上顯示為兩個窗格，左紅色，右綠色，如預期。 如果我改變“正確”
<p>Right</p>
或者完全刪除它，或者（我想做）用幾個div替換它，我得到了錯誤的格式。
這是Firefox的錯誤，還是我做錯了什么，或者我的期望是不正確的？ （FWIW，IE 7將它們全部平分，好像它不理解內聯塊;無所謂，這是一個內部應用程序。我只使用Firefox）。 我可以使用float / margin獲得我想要的布局，但我不想這樣做。
3 個解決方案
解決方案1
6 已采納 2009-03-03 21:13:36
好的顯示：內聯塊可能有點棘手，以獲得跨瀏覽器。 它至少需要幾個黑客，對於Firefox 2，可能需要額外的元素。
CSS
.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
display：-moz-inline-stack適用於Firefox 2.所有直接子節點都需要顯示：block或者是塊級元素。 注意如果你需要你的inline-block元素來收縮包裝我認為你可以使用display：-moz-inline-box代替。
zoom：1給出了元素的hasLayout（對於IE 7及以下版本）。 IE7及以下兼容性所需的黑客攻擊的第1部分。
** display：inline *是IE7及以下兼容性所需的hack的第二部分。
我偶爾需要添加overflow：隱藏IE兼容性。
針對您的具體情況，我認為您需要的是：
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
vertical-align: top;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
vertical-align: top;
}
</style></head><body>
<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>
解決方案2
3 2009-03-03 21:59:49
我得到了糟糕的格式。
你被邊緣崩潰所困擾 ，一個CSS'聰明'，這是一個痛苦，因為它是一個福音。 <p>的邊緣向外坍塌，成為內聯區塊的上邊距; 然后，這表現為“內聯”元素上的邊距，推動文本行的垂直對齊。
您可以通過從'p'元素中刪除邊距並使用填充來阻止它發生。 或者，在塊的頂部放置一個非空元素，頂部沒有邊緣，底部沒有底邊。
這是一個Firefox錯誤
我認為可能是的，根據規范：
內聯塊元素的邊距不會崩潰（甚至不包括它們的流入子代）。
解決方案3
0 2014-12-06 03:02:11
inline-block此值使元素生成內聯級塊容器。 內聯塊的內部被格式化為塊框，元素本身被格式化為原子內聯級框。 視覺渲染模型
內聯顯示塊級元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.