三栏布局-中栏流动布局的方式

Posted 2020-12-07 baimeishaoxia

方法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
        }

这种方式虽说也能实现中栏流动布局，但是中间栏中必须有内容撑开中间栏。

效果图：

如果没有足够的内容撑开，就会出现下面的情况