day08—css布局解决方案之多列布局

转行学开发，代码100天——2018-03-24

本文将记录CSS布局之垂直布局解决方案。

常见的多列布局包括以下：

1.定宽+自适应

2.两列定宽+一列自适应

3.不定宽+自适应

4.两列不定宽+一列自适应

5.等分布局

6.定宽+自适应+等高

下文将先后对上述6种方案作详细说明。

1.定宽+自适应

• 使用float+overflow

实现方法：通过左边框脱离文本流，设置右边规定溢出元素框时发生的事情以达到多列布局，

即左边框：float:left;width/margin-left

右边框：overflow:hidden;

<div class="parent">
        <div class="left">
           <p>left</p>
        </div>

        <div class="right">
            <p>right</p>
            <p>right</p>

        </div>
    </div>

      .left
        {
            float: left;
            width:300px;
            margin-left: 20px;
            border:1px solid red;
        }
        .right
        {
            overflow: hidden;
            width: 600px;
            border:1px solid orange;
        }

（为了便于查看，添加了边框效果）

该方法简单，但不支持ie6.

• 使用float+margin方法

实现方法：通过将左边框脱离文本流，右边框向右移动一定的距离形成多列布局。

即：左边框：float:left;margin-left

右边框：margin-left:

        .left
        {
            float: left;
            margin-left: 200px;
            border:1px solid red;
        }
        .right
        {
            margin-left:300px;
            width: 300px;
            border:1px solid orange;

        }

该方法中同时设置了左右边框的左边距，当右边距小于等于左边距时，会发生重叠。因此选用该方法设置多列布局时，要合理设置边距值。

该方法简单易用，依然存在兼容性问题。

• 使用foat+margin(改良版)

实现方法：在方法（1）的基础上，给右边框添加一个父框，设置左、右父框属性

即左边框：float:left;margin-left、position：relative

右边框(父)：float：right、width:100%;margin-left:(或者margin-right:)

右边框：margin-left:

<div class="parent">
        <div class="left">
           <p>left</p>
        </div>

       <div class="right-fix">

            <div class="right">
                <p>right</p>
                <p>right</p>

            </div>
        </div>
    </div>

.left
        {
            float: left;
            position: relative;
            width: 100px;
            margin-left: 300px;
            border:1px solid red;
        }
        .right-fix
        {
            margin-right:100px;
            width: 600px;
            float: right;
            border:1px solid orange;
        }
        .right
        {
            margin-left: 30px;
            border:1px solid #ccc;
        }

运行效果如下图，该方法设置属性及属性值时需要反复调整，易于理解。

•  使用table方法

实现方法：将父框设置为表格，将左右边框转化为同一行的td,实现多列布局

父框：display:table; width:100%;table-layout:fixed;

左右框：display:table-cell,最后设置左框的width,padding-right属性

       .parent
        {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .left,.right
        {
            display: table-cell;
            border:1px solid red;

        }
        .left
        {
            width: 300px;
            padding-right: 20px;
        }

•  使用CSS3的布局利器 flex方法

实现方法：先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex属性放置在不同盒子内，多列效果不同

        .parent
        {
            display: flex;
            flex: 1;
        }
        .left
        {
            width: 300px;
            margin-right: 100px;
            border:1px solid red;
            /*flex: 1;*/
        }
        .right
        {
            /*flex: 1;*/
            border:1px solid red;
        }

2.两列定宽+一列自适应

实现方法:

先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden。

<!--两列定宽+一列自适应-->
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="center">
            <p>center</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

   .left,.center
        {
            float: left;
            width: 300px;
            margin-left: 30px;
        }
        .right
        {
            overflow: hidden;
        }

3.不定宽+自适应

• 使用float+overflow方法

实现方法：左框：float:left/margin-right:

右框：overflow:hidden

最后可设置左框中的内容width

与定宽+自适应方法相比，只是减少了左右框的宽度设置。

        .left
        {
            float: left;
            margin-right: 20px;
            border:1px solid red;
        }
        .right
        {
            overflow: hidden;
            border:1px solid #ccc;
        }

• 使用table方法

实现方法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width。

        .parent
        {
            display: table;
            width: 100%;
        }
        .left,.right
        {
            display: table-cell;
        }
        .left
        {
            width: 0.1%;
            padding-right: 20px;
        }
        .left p
        {
            width: 200px;

        }

• 使用flex方法

实现方法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。

        .parent
        {
            display: flex;
        }
        .left
        {
            flex: 1;
            margin-left: 20px;
        }
        .left p
        {
            width: 300px;
        }

flex功能强大，兼容性存在一定的问题。

4.两列不定宽+一列自适应

实现方法：先将左、中框设置为float:left;margin-right:..再设置右框overflow:hidden.最后给左中框中的内容设置width

        .left,.center
        {
            float: left;
            margin-right: 20px;
        }
        .right
        {
            overflow: hidden;
        }
        .left p,.right p
        {
            width: 100px;
        }

5.等分布局

• 使用float

实现方法：先将父框设置为margin-left：-*px;再设置子框float:left;width:25%;padding-left/box-sizing:border-box

<div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>

    .parent
     {
         margin-left: -20px;
     }
     .column
     {
         float: left;
         width: 25%;
         padding-left: 20px;
         box-sizing: border-box;
     }

• 使用table方法

实现方法：

先将父框的修正框设置为margin-left: -*px，再设置父框display: table、width:100%、table-layout: fixed，设置子框display: table-cell、padding-left。

<div class="parent-fix">
    <div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>
</div>

.parent-fix
    {
        margin-left: -20px;

    }
     .parent
     {
         display: table;
         width: 100%;
         table-layout: fixed;
     }
     .column
     {
         display: table-cell;
         padding-left: 20px;
     }

• 使用flex

实现方法：将父框设置为display: flex，再设置子框flex: 1，最后设置子框与子框的间距margin-left。

   .parent
    {
        display: flex;
    }
    .column
    {
        flex: 1;
    }
    .column+.column
    {
        margin-left: 20px;
    }

6.定宽+自适应+两块高度一样高

• 使用float方法

实现方法：父框 overflow：hidden；左右框设置为 padding-bottom：9999px；margin-left:-9999px；

左框：float:left;width/margin-right

右框：overflow:hidden

[ 伪等高，不是真正意义上的等高 ]

 .parent
    {
        overflow: hidden;
    }

    .left,.right
    {
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .left
    {
        float: left;
        width: 100px;
        margin-right: 20px;
    }
    .right
    {
        overflow: hidden;
    }

• 使用flex方法

实现方法：将父框设置为display: flex，再设置左框width、margin-right/margin-right，最后设置右框flex:1。

    .parent
    {
        display: flex;
    }
    .left
    {
        width: 300px;
        margin-left:20px;
    }
    .right
    {
       flex: 1;
    }