三欄布局-中欄流動(dòng)布局的方式

xiongzenghui 發(fā)布于2019-08-29 15:09 / 645人閱讀

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

方法1

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

如下面代碼所示

那么具體布局代碼如下

        .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;
        }

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

效果如下

方法2

使用絕對(duì)定位

將三個(gè)欄用一個(gè)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
        }

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

效果圖：

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