成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

三欄布局-中欄流動布局的方式

xiongzenghui / 678人閱讀

摘要：方法首先使用一個包住左側(cè)欄和中間欄，再用一個大的包住左中右三個欄。如下面代碼所示這是左邊欄這是中間欄這是右邊欄那么具體布局代碼如下這個方法的主要思想是布局中欄的時候，要把設(shè)置為，保證中欄的寬度自適應(yīng)。

方法1

首先使用一個wrap包住左側(cè)欄和中間欄，再用一個大的wrap包住左中右三個欄。

如下面代碼所示


    

        

            這是左邊欄
        

        

           這是中間欄
        

    

    

        這是右邊欄

那么具體布局代碼如下

        .fuwrap  {
            float: left;
            width: 100%;
        }
        
        .ziwrap{
            float: left;
            width: 100%;
            margin-right: -250px;
            height: 100px;
        }
        .left{
            float: left;
            width: 150px;
            background-color: red;
            height: 98px;
        }
        .middle{
            width: auto;
            background-color: green;
            height: 98px;
            margin-right: 250px;
            margin-left: 150px;
            word-wrap:break-word
        }
        .middle *{
            margin-left: 20px;
        }
        .right{
            float: left;
            width: 250px;
            background-color: peachpuff;
            height: 98px;
        }

這個方法的主要思想是布局中欄的時候，要把width設(shè)置為auto，保證中欄的寬度自適應(yīng)。將中欄的左邊margin設(shè)置為左邊欄的寬度，留出左邊欄的位置，同時將margin-right設(shè)置為ziwrap的margin-right的相反值，這樣既能在ziwrap布局后留出右邊欄的位置，還能保證中間欄的內(nèi)容不被右邊欄所遮擋住。

效果如下

方法2

使用絕對定位

將三個欄用一個fuwrap包圍住，然后將左欄定位到左上角，右邊欄定位到右上角，不設(shè)置中間欄的寬度，設(shè)置其左右margin分別為左右欄的寬度，就可以了。



    

        這是左邊欄
    


    

        這是中間欄
    


    

        這是右邊欄

布局代碼為

       .fuwrap {
            position: relative;
            width: 100%;
        }
        .left{
            width: 150px;
            background-color: red;
            height: 98px;
            top: 0px;
            left: 0px;
            position:absolute;
        }
        .middle{
            background-color: green;
            height: 98px;
            word-wrap:break-word;
            margin-left: 150px;
            margin-right: 250px;
        }
        .middle *{
            margin-left: 20px;
        }
        .right{
            width: 250px;
            background-color: peachpuff;
            height: 98px;
            top: 0px;
            right: 0px;
            position:absolute;
        }

效果圖同方法1

方法3

這種方式是使用css3 display:table-cell



    

        這是左邊欄
    


    

        這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄
    


    

        這是右邊欄

布局代碼

.fuwrap{
            width: 100%;
        }
        .left{
            width: 150px;
            background-color: red;
            height: 98px;
            display:table-cell
        }
        .middle{
            background-color: green;
            height: 98px;
            word-wrap:break-word;
            display:table-cell;

        }

        .right{
            width: 250px;
            background-color: peachpuff;
            height: 98px;
            display:table-cell
        }

這種方式雖說也能實現(xiàn)中欄流動布局，但是中間欄中必須有內(nèi)容撐開中間欄。

效果圖：

如果沒有足夠的內(nèi)容撐開，就會出現(xiàn)下面的情況

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113136.html

相關(guān)文章

  • CSS入門指南-4：頁面布局

    摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計指南》的讀書筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認(rèn)的 display 值。對于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...

    ethernet 評論0 收藏0

  • CSS入門指南-4：頁面布局

    摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計指南》的讀書筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認(rèn)的 display 值。對于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...

    Stardustsky 評論0 收藏0

  • CSS三欄布局的經(jīng)典實現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    neuSnail 評論0 收藏0

  • CSS三欄布局的經(jīng)典實現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

    Forelax 評論0 收藏0

  • 繞了一大圈，只是因為auto是相對父元素的 —— 中欄流動布局中的一個小問題

    摘要：這里，要注意到并沒有浮動，我試了一下讓它浮動，它就變成了這個樣子原來，的自動寬度是相對于父元素的，它會把父元素剩余的部分全部撐滿，而左右欄是浮動的，因此并不占據(jù)空間。 問題是這樣的，先上圖：showImg(https://segmentfault.com/img/bVElrr?w=953&h=368);最初我的想法很簡單，三個浮動的欄，左右兩邊固定寬度，中欄寬度為auto，但是一個用負(fù)...

    Gu_Yan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<