// html
<div class="wrap">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
1：绝对定位三栏布局
.wrap {
height: 500px;
position: relative;
.left {
position: absolute;
left: 0;
width: 300px;
background: red;
}
.middle {
position: absolute;
left: 300px;
right: 300px;
width: auto;
background: yellow;
}
.right {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
}
2: 浮动三栏布局（注意这里class="middle" 是放在html最后面布局中）
<div class="right">right</div>
<div class="middle">middle</div> // 这里放在最后
.wrap {
.left {
float: left;
width: 300px;
background: red;
}
.middle {
background: yellow;
}
.right {
float: right;
width: 300px;
background: blue;
}
}
3： 弹性三栏布局。
.wrap {
display:flex;
.left {
width: 300px;
background: red;
}
.middle {
flex:1;
background: yellow;
}
.right {
width: 300px;
background: blue;
}
}
四：表格布局三栏布局
.wrap {
width: 100%; // 注意，这里添加100% 的宽度
display:table;
div {
display: table-cell;
}
.left {
width: 300px;
background: red;
}
.middle {
background: yellow;
}
.right {
width: 300px;
background: blue;
}
}
五、网格布局
.wrap {
width: 100%;
display: grid;
grid-template-rows: 500px;
grid-template-columns: 300px auto 300px;
.left {
background: red;
}
.middle {
background: yellow;
}
.right {
background: blue;
}
}
1、float布局 优点: 兼容性很好 缺点：脱离文档流，需要清楚浮动，不然造成高度塌陷
2、Position布局 优点：方便快捷 缺点：脱离文档流，下面子元素也要脱离文档流
3、table布局 优点：使用起来方便,兼容性也不存在问题。 缺点：一个内容增加高度增加，其它两个也会一样增高。
4、flex布局 优点：比较强大, 缺点： 只能支持到IE9以上。（目前移动和PC我都在使用这个）
5、网格布局： 优点：方便快捷 缺点：兼容性差。
六、问题： 假如高度不固定，上面那种布局还可以继续实现？
解：table布局、flex布局。
网友评论