多列布局

1、定宽+自适应

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>
左边定宽

（1）float + margin

    float 特性：元素浮动后，其它元素会环绕它。

    <style>
        .left{
            float: left;
            width: 100px;
        }
        .right{
            margin-left: 100px;
        }
    </style>

（2）float + overflow

    <style>
        .left{
            float: left;
            width: 100px;
            margin-right: 20px; 
        }
        .right{
            overflow: hidden;
        }
    </style>

（3）table

    <style>
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .left, .right{
            display: table-cell;
        }
        .left{
            width: 100px;
            padding-right: 20px;  td是无法设置margin
        }
    </style>

（4）flex

    <style>
        .parent{
            display: flex;
        }

        .left{
            width: 100px;
            margin-right: 20px; 
        }
        .right{
            flex: 1;
        }
    </style>

2、不定宽+自适应

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>
左边宽度由内容决定

（1）float + overflow

    <style>
        .left{
            float: left;
            margin-right: 20px; 
        }
        .right{
            overflow: hidden;
        }
    </style>

（2）table

    <style>
        .parent{
            display: table;
            width: 100%;
        }
        .left, .right{
            display: table-cell;
        }
        .left{
            width: 0.1%;  内容优先，所以内容不会被挤掉 
            padding-right: 20px;  td是无法设置margin
        }
    </style>

（3）flex

    <style>
        .parent{
            display: flex;
        }

        .left{
            margin-right: 20px; 
        }
        .right{
            flex: 1;
        }
    </style>

3、等宽布局

（1）float

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

各列均分父元素宽度，但是由于间隔关系，父元素应该多包含一个间隔才能使元素不溢出。
然后使用box-sizing: border-box，将间隔包含在列宽中。
box-sizing: border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    即，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

缺点： 必须知道有几列。

<style>
    .parent{
        margin-left: 20px;  间隔宽度，使得各列占宽的25%，不溢出，
    }
    .column{
        float: left;
        width: 25%;
        padding-left: 20px;
        box-sizing: border-box; 

    }
</style>

（2）table

<div class="parent-fix">    
    <div class="parent">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
        <div class="column">4</div>
    </div>
</div>
parent设置为table 且宽度为100%，所以要增加一层来增加宽度。

<style>
    .parent-fix{
        margin-left: -20px;  
    }
    .parent{
        display: table;
        width: 100%;
        table-layout: fixed;  布局优先，列宽相等
    }
    .column{
        display: table-cell;
        padding-left: 20px;

    }
</style>

（3）flex

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


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

4、等高

当一列被内容撑高时，其余列也跟着变高。

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

（1）table

<style>
    .parent{
        display: table;
        width: 100%;
        table-layout: fixed;  布局优先，列宽相等
    }
    .left, .right{
        display: table-cell;
    }
    .left{
        width: 100%;
        border-right: 20px solid transparent;
        background-clip: padding-box;
    }
</style>

（2）flex

    <style>
        .parent{
            display: flex;
        }

        .left{
            width: 100px;
            margin-right: 20px; 
        }
        .right{
            flex: 1;
        }
    </style>

（3）float + overflow

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