基于float的幾種布局

Freelander 發(fā)布于2019-08-29 11:03 / 3136人閱讀

摘要：在這里介紹基于的幾種布局浮動(dòng)與兩側(cè)自適應(yīng)的布局如圖所示，左邊沒(méi)有限定寬度，右邊寬度自適應(yīng)。使用實(shí)現(xiàn)的布局，可以適用于兩欄的布局。單側(cè)固定的布局單側(cè)固定的布局分為固定布局和流體布局。

在這里介紹基于float的幾種布局.

1.浮動(dòng)與兩側(cè)自適應(yīng)的布局

如圖所示，左邊沒(méi)有限定寬度，右邊寬度自適應(yīng)。使用table-cell實(shí)現(xiàn)的布局，可以適用于兩欄的布局。

HTML代碼




    
    與浮動(dòng)與兩側(cè)自適應(yīng)的布局



    
    與浮動(dòng)與兩側(cè)自適應(yīng)的布局與浮動(dòng)與兩側(cè)自適應(yīng)的布局與浮動(dòng)與兩側(cè)自適應(yīng)的布局與浮動(dòng)與兩側(cè)自適應(yīng)的布局與浮動(dòng)與兩側(cè)自適應(yīng)的布局與浮動(dòng)與兩側(cè)自適應(yīng)的布局與浮動(dòng)與兩側(cè)自適應(yīng)的布局

對(duì)應(yīng)的CSS代碼

    *{padding:0;margin:0;}
    .container{
            max-width:960px;
            margin:0 auto;
     }
    .left{
        float:left;
        margin-right:20px;
    }
    .right{
        height:220px;
        display: table-cell; /*像表格單元格一樣顯示*/
        width: 3000px;/*由于是根據(jù)內(nèi)容而決定寬度，當(dāng)內(nèi)容不是很多的時(shí)候， 寬度沒(méi)有被撐開(kāi)，此時(shí)一些相對(duì)于這個(gè)元素定位的元素就會(huì)錯(cuò)位，故設(shè)置足夠長(zhǎng)的寬度，使其定位正常*/
        *width: auto;/*兼容IE6、7*/
        background:green;
    }

需要說(shuō)明一點(diǎn)是：display: table-cell后，是根據(jù)內(nèi)容來(lái)決定其實(shí)際的寬度。
table-cell在IE6、7中是不支持的，可以使用*width:auto進(jìn)行兼容性處理,不過(guò)現(xiàn)在這兩個(gè)版本IE的市場(chǎng)占有率很低，適當(dāng)?shù)臅r(shí)候可以刪去。

2.右側(cè)尺寸固定的浮動(dòng)布局

分別有兩種方式，一種不改變DOM樹(shù)結(jié)構(gòu)顯示順序，一種則會(huì)使DOM樹(shù)結(jié)構(gòu)順序與顯示的界面相異。

改變DOM樹(shù)先后順序的方法

HTML代碼




    
    浮動(dòng)與右側(cè)尺寸固定的流體布局



    
    與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局

對(duì)應(yīng)的CSS代碼

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        margin-right:200px;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: right;
        background:green;
    }

關(guān)鍵點(diǎn)在于，HTML代碼中，把在右邊顯示的DIV放到左邊顯示的前面，然后通過(guò)float: right浮動(dòng)到右邊，可通過(guò)調(diào)整left盒子的margin-right來(lái)調(diào)整兩個(gè)盒子之間的間距。
這種方式會(huì)破壞頁(yè)面優(yōu)先渲染順序，它會(huì)先渲染右邊的盒子，再渲染左邊的盒子，視頁(yè)面區(qū)域內(nèi)容重要程度而定。

不改變DOM樹(shù)先后順序的方法

HTML代碼




    
    浮動(dòng)與右側(cè)尺寸固定的流體布局



    

與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局

對(duì)應(yīng)的CSS代碼

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
            width:100%;
            float:left;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: left;
        margin-left:-200px;/*這個(gè)數(shù)值的大小是跟其寬度值相同的*/
        background:green;
    } 
    .left-content{
        margin-right:220px; //文字不被覆蓋
    }

關(guān)于negative margin（負(fù)邊距），w3c提到:

Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.

給定一個(gè)足夠大的負(fù)邊距，可以使受影響的相鄰元素發(fā)生重合。

3.單側(cè)固定的布局

單側(cè)固定的布局分為固定布局和流體布局。
通用的HTML




    
    浮動(dòng)與右側(cè)尺寸固定的流體布局



    
    與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局與右側(cè)尺寸固定的浮動(dòng)布局

固定布局

對(duì)應(yīng)的CSS代碼

    *{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        background:red;
    }
    .right{
        width:100px;
        height:100px;
        float: right;
        background:green;
    }

通過(guò)float:left; float:right;實(shí)現(xiàn)。

流體布局

對(duì)應(yīng)的CSS代碼

    *{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        margin-right:20px;
        background:red;
    }
    .right{
        background:green;
    }

GPU云服務(wù)器云服務(wù)器最基本的幾種 html的幾種輪播 js的幾種數(shù)據(jù)類型 js緩存的幾種方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111386.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Freelander

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CheapWindowsVPS限時(shí)55折：美國(guó)VPS，支持Windows系統(tǒng)，可選美洲、歐洲、亞洲等

閱讀 25836·2021-09-29 09:41
OuluCloud - CN2 GIA線路高防御服務(wù)器/香港/圣何塞/洛杉磯/加拿大/500GDDO

閱讀 5000·2021-09-10 11:20
奮戰(zhàn)金九銀十？刷完這一套面試題就夠了！自動(dòng)化軟件測(cè)試工程師跳槽漲薪秘籍！

閱讀 2123·2021-09-09 09:32
css文本模型漫游指南

閱讀 1978·2019-08-30 15:44
前端面試系列--前言篇

閱讀 3284·2019-08-29 17:13
讓頁(yè)面的字體變得更清晰（css實(shí)現(xiàn)）和使用css樣式布局價(jià)格劃線

閱讀 2883·2019-08-29 14:14
css 進(jìn)度條的文字根據(jù)進(jìn)度漸變

閱讀 2151·2019-08-29 14:11
純 CSS 實(shí)現(xiàn)自適應(yīng)正方形

閱讀 3295·2019-08-29 12:36

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于float的幾種布局

相關(guān)文章

**實(shí)現(xiàn)三欄布局的幾種方法**

**實(shí)現(xiàn)三欄布局的幾種方法**

**實(shí)現(xiàn)三欄布局的幾種方法**

幾種常見(jiàn)的CSS布局

發(fā)表評(píng)論

0條評(píng)論

Freelander

男|高級(jí)講師

TA的文章

CheapWindowsVPS限時(shí)55折：美國(guó)VPS，支持Windows系統(tǒng)，可選美洲、歐洲、亞洲等

OuluCloud - CN2 GIA線路高防御服務(wù)器/香港/圣何塞/洛杉磯/加拿大/500GDDO

奮戰(zhàn)金九銀十？刷完這一套面試題就夠了！自動(dòng)化軟件測(cè)試工程師跳槽漲薪秘籍！

css文本模型漫游指南

前端面試系列--前言篇

讓頁(yè)面的字體變得更清晰（css實(shí)現(xiàn)）和使用css樣式布局價(jià)格劃線

css 進(jìn)度條的文字根據(jù)進(jìn)度漸變

純 CSS 實(shí)現(xiàn)自適應(yīng)正方形

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于float的幾種布局

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！