基于float的幾種布局

Freelander 發布于2019-08-29 11:03 / 3064人閱讀

摘要：在這里介紹基于的幾種布局浮動與兩側自適應的布局如圖所示，左邊沒有限定寬度，右邊寬度自適應。使用實現的布局，可以適用于兩欄的布局。單側固定的布局單側固定的布局分為固定布局和流體布局。

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

1.浮動與兩側自適應的布局

如圖所示，左邊沒有限定寬度，右邊寬度自適應。使用table-cell實現的布局，可以適用于兩欄的布局。

HTML代碼




    
    與浮動與兩側自適應的布局



    
    與浮動與兩側自適應的布局與浮動與兩側自適應的布局與浮動與兩側自適應的布局與浮動與兩側自適應的布局與浮動與兩側自適應的布局與浮動與兩側自適應的布局與浮動與兩側自適應的布局

對應的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;/*由于是根據內容而決定寬度，當內容不是很多的時候， 寬度沒有被撐開，此時一些相對于這個元素定位的元素就會錯位，故設置足夠長的寬度，使其定位正常*/
        *width: auto;/*兼容IE6、7*/
        background:green;
    }

需要說明一點是：display: table-cell后，是根據內容來決定其實際的寬度。
table-cell在IE6、7中是不支持的，可以使用*width:auto進行兼容性處理,不過現在這兩個版本IE的市場占有率很低，適當的時候可以刪去。

2.右側尺寸固定的浮動布局

分別有兩種方式，一種不改變DOM樹結構顯示順序，一種則會使DOM樹結構順序與顯示的界面相異。

改變DOM樹先后順序的方法

HTML代碼




    
    浮動與右側尺寸固定的流體布局



    
    與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局

對應的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;
    }

關鍵點在于，HTML代碼中，把在右邊顯示的DIV放到左邊顯示的前面，然后通過float: right浮動到右邊，可通過調整left盒子的margin-right來調整兩個盒子之間的間距。
這種方式會破壞頁面優先渲染順序，它會先渲染右邊的盒子，再渲染左邊的盒子，視頁面區域內容重要程度而定。

不改變DOM樹先后順序的方法

HTML代碼




    
    浮動與右側尺寸固定的流體布局



    

與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局

對應的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;/*這個數值的大小是跟其寬度值相同的*/
        background:green;
    } 
    .left-content{
        margin-right:220px; //文字不被覆蓋
    }

關于negative margin（負邊距），w3c提到:

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

給定一個足夠大的負邊距，可以使受影響的相鄰元素發生重合。

3.單側固定的布局

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




    
    浮動與右側尺寸固定的流體布局



    
    與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局與右側尺寸固定的浮動布局

固定布局

對應的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;
    }

通過float:left; float:right;實現。

流體布局

對應的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云服務器云服務器最基本的幾種 html的幾種輪播 js的幾種數據類型 js緩存的幾種方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111386.html

實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

golden_hamster 2019-08-02 11:55 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

IamDLY 2019-08-29 17:12 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

Hegel_Gu 2019-08-23 12:52 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0