這篇文章將為大家詳細講解有關css中float left布局換行不正常怎么辦,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
站在用戶的角度思考問題,與客戶深入溝通,找到道外網(wǎng)站設計與道外網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:網(wǎng)站設計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)站空間、企業(yè)郵箱。業(yè)務覆蓋道外地區(qū)。最近遇到一個頁面布局上的問題,后來模擬了一下還原了下出現(xiàn)的原因。本來大概想實現(xiàn)的布局大概是這樣的
結果出現(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; }
這樣的代碼布局如最開始的圖是正常的,但當special的height小于280px時就會變得不正常。
然后去看了下float的定義:浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動的邊框為止。
也就是本來第二行的想float到左邊,然后碰上了第三塊,然后就停下了。第二行后面的就被擠到第三行了。
關于“css中float left布局換行不正常怎么辦”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
分享名稱:css中floatleft布局換行不正常怎么辦-創(chuàng)新互聯(lián)
鏈接URL:http://muchs.cn/article22/dppjcc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供域名注冊、全網(wǎng)營銷推廣、小程序開發(fā)、標簽優(yōu)化、網(wǎng)站制作、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容