CSS常见布局.MarkDown

左列固定宽度，右列自适应

使用flex布局实现

.container{
    display: flex;
}
.l{
    width: 100px;
}
.r{
    flex: 1;
}

Demo

使用float以及margin实现

.l{
    width: 100px;
    float: left;
}
.r{
    margin-left: 100px;
}

Demo

使用float以及overflow实现

.l{
    width: 100px;
    float: left;
}
.r{
    overflow: hidden;
}

通过设置overflow创建了一个BFC，可以形成一个独立的容器，浮动盒区域不叠加在BFC上，容器内子元素不会影响到外面的元素，反之亦然。设置overflow:auto;等都能达到同样效果，只需要形成一个BFC。

Demo

使用table实现

.container{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.l{
    width: 100px;
}
.r, .l{
    display: table-cell;
}

Demo

右列固定宽度，左列自适应

使用flex布局实现

.container{
    display: flex;
}
.l{
    flex: 1;
}
.r{
    width: 100px;
}

Demo

使用float以及margin实现

.l{
    float: left;
    margin-right: -100px;
    width: 100%;
}
.r{
    float: right;
    width: 100px;
}

Demo

使用table实现

.container{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.r{
    width: 100px;
}
.l, .r{
    display: table-cell;
}

Demo

两侧固定宽度，中间自适应

使用flex布局

.container{
    display: flex;
}
.l{
    width: 100px;
}
.c{
    flex: 1;
}
.r{
    width: 100px;
}

Demo

使用float以及margin布局

 .container{
            
}
.l{
    float: left;
    width: 100px;
}
.c{
    float: left;
    margin-right: -200px;
    width: 100%;
}
.r{
    float: left;
    width: 100px;
}

Demo

使用table布局

.container{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.l{
    width: 100px;
}
.r{
    width: 100px;
}
.l, .r, .c{
    display: table-cell;
}

Demo

左列不定宽，右列自适应

利用flex实现

.container{
    display: flex;
}
.r{
    flex: 1;
}

Demo

利用table实现

.container{
    display: table;
}
.l{
    background-color: red;
    width: 1%;
}
.r{
    background-color: gainsboro;
}
.l, .r{
    display: table-cell;
}

Demo

利用float实现

左侧元素浮动，右侧元素通过overflow形成BFC。

.l{
    float: left;
    background-color: blanchedalmond;
}
.r{
    overflow: hidden;
    background-color: red;
}

Demo

多列等分布局

利用flex实现

.container{
    display: flex;
}
.ele{
    flex: 1;
}

Demo

利用float实现

.ele{
    float: left;
    width: 25%;
}

Demo

利用table实现

.container{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.ele{
    display: table-cell;
}

Demo