html5三列布局，常见的五种三列布局前⾔：本⽂介绍五种常见的三列布局，主要是两侧定宽，中间⾃适应，其他情况⼤同⼩异。
⽅式⼀：float
HTML代码：
左边css布局左边固定右边自适应
右边
中间
注：center要放最后。center这个元素是块级元素，占据⼀⾏，如果center放中间，right元素会在下⼀⾏向右浮动
CSS代码：
.left {
float: left;
width: 300px;
background-color: blue;
}
.right {
float: right;
width: 300px;
background-color: blue;
}
.center {
background-color: red;
}
⽅式⼆：table布局，⾮HTML中
HTML代码：
这是中间
CSS代码：
.layout-table{
width: 100%;
display: table;
height: 100px;
}
.layout-table div {
display: table-cell;
}
.left {
background-color: blue; }
.right {
width: 300px; background-color: red;
}
.center {
background-color: blue; }
⽅式三：flex布局
HTML代码：
这是中间
CSS代码：
.layout-flexbox{
display: flex;
}
.left {
width: 300px; background-color: blue; }
.center {
flex: 1;
background-color: green; }
.right {
width: 300px; background-color: blue; }
⽅式四：grid布局
HTML代码：
这是中间
CSS代码：
.layout-grid{
display: grid;
grid-template-rows:100px;
grid-template-colums:300px auto 300px; }
.left {
background-color: blue;
}
.
center {
background-color: green;
}
.right {
background-color: blue;
}
⽅式五：绝对布局
HTML代码：
这是中间
CSS代码：
.layout-absolute div{
position: absolute;
}
.left {
left:0;
width:300px;
background-color: blue;
}
.center {
left:300px;
right:300px;
background-color: green;
}
.right {
width:300px;
right:0;
background-color: blue;
}
五种⽅法的优缺点：
float：兼容性较好，⼀般需要清除浮动
table：兼容性较好，SEO不太友好
grid：新技术，对旧浏览器兼容不太好，代码简洁absolute：⽅便易⽤，脱离⽂档流，可使⽤性较差flex：没什么明显缺点，且移动端友好

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。