浮動元素如何佔用垂直空間

我讀過這篇提及使用CSS的文章，但我仍然不明白爲什麼圖像編號4不在圖像編號1之下，而是位於圖像編號3之下。請幫幫我。 HTML代碼：浮動元素如何佔用垂直空間

<ul> 
    <li><img src="http://placehold.it/100x100&text=1"></li> 
    <li><img src="http://placehold.it/100x150&text=2"></li> 
    <li><img src="http://placehold.it/100x100&text=3"></li> 
    <li><img src="http://placehold.it/100x100&text=4"></li> 
    <li><img src="http://placehold.it/100x100&text=5"></li> 
    <li><img src="http://placehold.it/100x150&text=6"></li> 
    <li><img src="http://placehold.it/100x100&text=7"></li> </ul>

風格：

li { 
float: left; 
margin: 4px; 
}

enter image description here

來源

2014-10-18 nguyenngoc101

從W3C CSS 2.1規範http://www.w3.org/TR/CSS2/visuren.html#floats摘自：

一個浮動框被移動到左側或右側直到其外邊緣接觸容納塊邊緣或外部另一個浮子的邊緣。如果存在線框，浮動框的外部頂部與當前線框的頂部對齊。

在這種情況下，你可能工作有什麼用display: inline-block;代替：

li { 
 
    display: inline-block; 
 
    margin: 4px; 
 
    vertical-align: top; 
 
}

<ul> 
 
    <li><img src="http://placehold.it/100x100&text=1"></li> 
 
    <li><img src="http://placehold.it/100x150&text=2"></li> 
 
    <li><img src="http://placehold.it/100x100&text=3"></li> 
 
    <li><img src="http://placehold.it/100x100&text=4"></li> 
 
    <li><img src="http://placehold.it/100x100&text=5"></li> 
 
    <li><img src="http://placehold.it/100x150&text=6"></li> 
 
    <li><img src="http://placehold.it/100x100&text=7"></li> </ul>

來源

2014-10-18 15:12:17

謝謝你，但什麼是「行框」在這種情況下，是什麼意思？ – nguyenngoc101 2014-10-18 15:25:56

我想最簡單的方法來描述一個線框是說它是一行文本。 http://reference.sitepoint.com/css/inlineformatting提供了更全面的解釋。 – 2014-10-18 17:42:48

由於兩數有浮動：左，如果是空間和元素，這些元素漂浮在左邊，他們會。

你所描述的行爲，如4號堆疊低於1號寧可適合inline-block的

來源

2014-10-18 15:14:04

浮動元素如何佔用垂直空間

回答

相關問題