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

方法1

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

以下面代碼所示

<div class="fuwrap">
    <div class="ziwrap">
        <div class="left">
            這是左邊欄
        </div>
        <div class="middle">
           這是中間欄
        </div>
    </div>
    <div class="right">
        這是右邊欄
    </div>
</div>

那麼具體佈局代碼以下

.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分別爲左右欄的寬度，就能夠了。

<div class="fuwrap">

    <div class="left">
        這是左邊欄
    </div>

    <div class="middle">
        這是中間欄
    </div>

    <div class="right">
        這是右邊欄
    </div>
</div>

佈局代碼爲

.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

<div class="fuwrap">

    <div class="left">
        這是左邊欄
    </div>

    <div class="middle">
        這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄這是中間欄
    </div>

    <div class="right">
        這是右邊欄
    </div>
</div>

佈局代碼

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

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

效果圖：

若是沒有足夠的內容撐開，就會出現下面的狀況