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

xiongzenghui 發布于2019-08-29 15:09 / 654人閱讀

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

方法1

首先使用一個wrap包住左側欄和中間欄，再用一個大的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設置為auto，保證中欄的寬度自適應。將中欄的左邊margin設置為左邊欄的寬度，留出左邊欄的位置，同時將margin-right設置為ziwrap的margin-right的相反值，這樣既能在ziwrap布局后留出右邊欄的位置，還能保證中間欄的內容不被右邊欄所遮擋住。

效果如下

方法2

使用絕對定位

將三個欄用一個fuwrap包圍住，然后將左欄定位到左上角，右邊欄定位到右上角，不設置中間欄的寬度，設置其左右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
        }

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

效果圖：

如果沒有足夠的內容撐開，就會出現下面的情況

云服務器 GPU云服務器三欄布局 html5 三欄布局 android布局方式 html的布局

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

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

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

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

ethernet 2019-08-02 15:57 評論0 收藏0
CSS入門指南-4：頁面布局

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

Stardustsky 2019-08-29 13:08 評論0 收藏0
CSS三欄布局的經典實現方法

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

neuSnail 2019-08-30 15:56 評論0 收藏0
CSS三欄布局的經典實現方法

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

Forelax 2019-08-02 14:31 評論0 收藏0
繞了一大圈，只是因為auto是相對父元素的 —— 中欄流動布局中的一個小問題

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

Gu_Yan 2019-08-29 11:28 評論0 收藏0