最近遇到一個(gè)頁面布局上的問題,后來模擬了一下還原了下出現(xiàn)的原因。本來大概想實(shí)現(xiàn)的布局大概是這樣的
結(jié)果出現(xiàn)了這樣的情況
頁面的html是這樣的
<div class="block"> <div></div> </div> <div class="block"> <div></div> </div> <div class="block"> <div></div> </div> <div class="block" > <div id="special"></div> </div> <div class="block"> <div></div> </div> <div class="block"> <div></div> </div>
css
.block { width: 25%; padding: 10px; float: left; box-sizing: border-box; } .block div { background-color: pink; width: 100%; height: 280px; } #special { height: 280px; background-color: green; }這樣的代碼布局如最開始的圖是正常的，但當(dāng)special的height小于280px時(shí)就會(huì)變得不正常。
然后去看了下float的定義：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)的邊框?yàn)橹埂?/p>
也就是本來第二行的想float到左邊，然后碰上了第三塊，然后就停下了。第二行后面的就被擠到第三行了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
