CSS-多列布局

html 结构：

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

css代码：

• 定宽+自适应

1. float + margin

.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}

2. float + overflow

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

3. table

.parent{
    display: table;
    width: 100%;
    table-layout: fixed; /* 布局优先，子列单元格会等宽 */
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

4. flex

.parent{
    display: flex;
}
.left{
    width: 100px;
    margin-right: 20px;
}
.right{
    flex: 1; /* 会自动分配剩余空间 */
}

• 不定宽+自适应

1. float + overflow

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

2. table

.parent{
    display: table;
    width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%; /* 内容优先，由内容决定宽度 */
    padding-right: 20px;
}
.left p{
    width:200px;
}

3. flex

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

• 等宽布局

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

1. float

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

2. table

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

3. flex

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

• 等高布局

1. table

.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    border-right: 20px solid transparent;
    background-clip: padding-box;
}

2. flex

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

3. float（伪等高）

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