html div左中右上中下,CSS三栏自适应布局，左中右，上中下

本文对可以实现三栏布局的方法进行了整理

左右固定宽度，中间自适应(5种方法)

1.float方法

2.absolute方法

3.flexbox方法

4.table方法

5.grid方法

image.png

css布局全解

html *{

padding: 0;

margin: 0

}

.layout article div{

min-height: 50px;

}

.layout{

margin-top: 10px;

}

.layout.float .right{

float: right;

width: 300px;

background: red;

}

.layout.float .left{

float: left;

width: 300px;

background: blue;

}

.layout.float .center{

background: yellow;

}

浮动解决方案

.layout.absolute .left-center-right div{

position: absolute;

}

.layout.absolute .left{

width: 300px;

left: 0;

background: blue;

}

.layout.absolute .center{

left: 300px;

right: 300px;

background: yellow;

}

.layout.absolute .right{

width: 300px;

right: 0px;

background: red;

}

绝对定位解决方案

.layout.flexbox{

margin-top: 70px;

}

.layout.flexbox .left-center-right{

display: flex;

}

.layout.flexbox .left{

width: 300px;

background: blue;

}

.layout.flexbox .center{

flex:1;

background: yellow;

}

.layout.flexbox .right{

width: 300px;

background: red;

}

flex定位解决方案

.layout.table .left-center-right{

display: table;

width: 100%;

height: 50px;

}

.layout.table .left-center-right div{

display: table-cell;

}

.layout.table .left{

width: 300px;

background: blue;

}

.layout.table .center{

background: yellow;

}

.layout.table .right{

width: 300px;

background: red;

}

表格定位解决方案

.layout.grid .left-center-right{

display: grid;

width: 100%;

grid-template-rows: 50px;

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

}

.layout.grid .left{

background: blue;

}

.layout.grid .center{

background: yellow;

}

.layout.grid .right{

background: red;

}

网格定位解决方案

上下固定高度，中间自适应(4种方法)

1.absolute方法

2.flexbox方法

3.table方法

4.grid方法

image.png

css上下高度不变，中间自适应布局

html *{

padding: 0;

margin: 0;

}

#wrapper div{

width: 150px;

}

#wrapper div.one,.two,.three,.four{

width: 150px;

height: 100%;

display: inline-block;

float: left;

}

.one,.two,.three{

background: green;

}

.layout.absolute div{

position: absolute;

float: left;

}

.layout.absolute .top{

top: 0;

height: 100px;

background: red;

}

.layout.absolute .bottom{

bottom: 0;

height: 100px;

background: blue;

float: left;

}

.layout.absolute .center{

top: 100px;

bottom: 100px;

background: yellow;

overflow: auto;

}

absolute中间自适应元素

.two{

margin-left:10px;

}

.layout.flexbox{

display: flex;

width: 100%;

height: 100%;

flex-direction:column;

}

.layout.flexbox .top{

height: 100px;

background: red;

}

.layout.flexbox .center{

flex:1;

background: yellow;

}

.layout.flexbox .bottom{

height: 100px;

background: blue;

}

flexbox中间自适应元素

.three{

margin-left: 10px;

}

.layout.table{

display: table;

height: 100%;

width: 100%;

}

.layout.table div{

display: table-row;

/*特别注意*/

display: inline-block;

}

.layout.table .top{

height: 100px;

background: red;

}

.layout.table .center{

height:calc(100% - 200px);

background: yellow;

}

.layout.table .bottom{

height: 100px;

background: blue;

}

table方法中间自适应元素

.four{

margin-left: 10px;

}

.layout.grid{

display: grid;

height: 100%;

grid-template-rows: 100px auto 100px;

grid-template-columns: 150px;

}

.layout.grid .top{

background: red;

}

.layout.grid .center{

background: yellow;

}

.layout.grid .bottom{

background: blue;

}

grid方法中间自适应元素

看似简单的题目，还是要多练习增加熟练度。