網(wǎng)站制作NEWS
8種方法實(shí)現(xiàn)兩欄布局
兩欄布局的實(shí)現(xiàn)方法多樣，下面介紹八種常見(jiàn)的布局方案。
首先，通過(guò)浮動(dòng)和margin屬性實(shí)現(xiàn)布局。給左側(cè)盒子.aside添加浮動(dòng)，隨后給右側(cè)盒子.main設(shè)置margin-left，形成左邊定寬，右邊自適應(yīng)的布局。其中，margin-left的值為.aside盒子的寬度。
其次，使用浮動(dòng)和BFC機(jī)制實(shí)現(xiàn)布局。同樣給.aside添加浮動(dòng)，然后給.main設(shè)置overflow:hidden開(kāi)啟BFC，清除左側(cè)浮動(dòng)的影響，實(shí)現(xiàn)左邊定寬，右邊自適應(yīng)。
接著，通過(guò)左側(cè)定位和margin屬性實(shí)現(xiàn)布局。將.aside的浮動(dòng)改為定位，同時(shí)給.main設(shè)置margin-left，形成布局。定位使用absolute/fixed，但因不符合題意，選擇absolute，注意子絕父相。
再者，采用右側(cè)定位和浮動(dòng)實(shí)現(xiàn)布局。給.aside添加浮動(dòng)，將.main的margin-left改為定位，形成布局。同樣，定位使用absolute，注意子絕父相。
接著是左右盒子定位布局，使用position:absolute為左右盒子設(shè)置，左側(cè)固定寬度，右側(cè)自適應(yīng)。
接下來(lái)是flex布局實(shí)現(xiàn)。將父盒子.contain設(shè)置為彈性容器，給.main設(shè)置flex:1，使其自動(dòng)撐滿剩余空間。
圣杯布局則需要特別注意DOM元素布局差異。實(shí)現(xiàn)步驟相對(duì)復(fù)雜，但原理與上述方法類似。
雙飛翼布局與圣杯布局在DOM結(jié)構(gòu)上略有區(qū)別。方法1和方法2在實(shí)現(xiàn)步驟上區(qū)別不大，主要在于將給.aside設(shè)置margin-left: -100%改為margin-right: -100%。
多重隨機(jī)標(biāo)簽