html5 三栏,三栏布局 html, css 5种

一. display: flex

.layout.flexbox .left-center-right {

display: flex;

}

.layout.flexbox .left {

width: 300px;

background: red;

}

.layout.flexbox .center {

/* 获得剩余可分配的空间 */

flex: 1;

background: yellow;

}

.layout.flexbox .right {

width: 300px;

background: blue;

}

二. relative, absolute

.left-center-right {

position: relative;

}

.layout.absolute .left {

position: absolute;

left: 0;

width: 300px;

background: red;

}

.layout.absolute .right {

position: absolute;

right: 0;

width: 300px;

background: blue;

}

.layout.absolute .center {

position: absolute;

left: 300px;

right: 300px;

background: yellow;

}

三. display: table, table-cell

.layout.table .left-center-right {

display: table;

}

.layout.table .left {

display: table-cell;

width: 300px;

background: red;

}

.layout.table .center {

display: table-cell;

background: yellow;

}

.layout.table .right {

display: table-cell;

width: 300px;

background: blue;

}

四. display: grid

.layout.grid .left-center-right {

width: 100%;

display: grid;

/* 一行： 高度为150px */

grid-template-rows: 150px;

/* 3列： 300px auto 300px */

grid-template-columns: 300px auto 300px;

}

.layout.float .left {

background: red;

}

.layout.float .center {

background: yellow;

}

.layout.float .right {

background: blue;

}

五. float

.layout.float .left-right-center::after {

display: block;

clear: both;

content: '';

}

.layout.float .left {

float: left;

width: 300px;

background: red;

}

.layout.float .center {

background: yellow;

margin-left: 300px;

margin-right: 300px;

}

.layout.float .right {

float: right;

width: 300px;

background: blue;

}