首頁(yè) 猿問(wèn) 三欄式布局設(shè)置浮動(dòng)問(wèn)題

三欄式布局設(shè)置浮動(dòng)問(wèn)題

JavaScript

千巷貓影 2018-08-09 09:09:26

三個(gè)div都設(shè)置浮動(dòng)，第二個(gè)div設(shè)置了寬度100%，它應(yīng)該是填滿空白2的位置才對(duì)啊，為什么會(huì)等于父容器的寬度，然后擠下來(lái)。

查看完整描述

1 回答

慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

基本上你理解錯(cuò)誤了，跟浮動(dòng)沒(méi)啥關(guān)係，基本上你設(shè)置寬度為百分比本來(lái)就是父元素的寬度為基準(zhǔn)，你設(shè)定為 100%自然是父元素的 100% ，所以也很自然被擠壓到二行，CSS 並不會(huì)說(shuō)當(dāng)你設(shè)置了 float 智能去判定剩餘寬度之類(lèi)的，你只要想 1 和 2 如果都設(shè)置 100% 那會(huì)呈現(xiàn)什麼情況？就可以知道誤解在哪。

所以，你應(yīng)該是設(shè)置其為 20% 80% 才會(huì)正確地填滿父元素的寬度，但是也必須注意到 margin 和 border 之類(lèi)的影響。