实现两栏布局的几种方式




-----利用margin-left

1.使用浮动—float

2.使用绝对定位实现—absolute

3.使用calc()函数

4.使用inline-block和calc()函数

---使用弹性布局—flex
.wrap {
    display: flex;
}
.left {
    height: 200px;
    background: purple;
    flex:0 0 200px
}
.right {
    background: skyblue;
    height: 200px;
    flex: 1;
}

----使用表格布局—table（不推荐使用）
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}