最近遇到一個頁面布局上的問題,后來模擬了一下還原了下出現的原因。本來大概想實現的布局大概是這樣的
結果出現了這樣的情況
頁面的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; }這樣的代碼布局如最開始的圖是正常的，但當special的height小于280px時就會變得不正常。
然后去看了下float的定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動的邊框為止。
也就是本來第二行的想float到左邊，然后碰上了第三塊，然后就停下了。第二行后面的就被擠到第三行了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
