三栏布局:
如果不考虑高度,即用内容填充高度的话,是可以用inline-block和calc()实现布局的。但适用性差。
float和position的兼容性好,但float会用到calc属性影响兼容性。
calc和flex的兼容性都有一定问题。
grid是未来的发展趋势所以兼容性拉跨也很合理吧,哈哈
body
<body>
<div class="out">
<div class="item left"></div>
<div class="item mid"></div>
<div class="item right"></div>
</div>
</body>
float实现
点我查看代码
.item{
float: left;
height: 400px;
}
.left,.right{
width: 200px;
background-color: antiquewhite;
}
.mid{
width: calc(100% - 400px);
background-color: aqua;
}
重点:使用了calc计算了中间宽度
absolute实现
点击查看代码
.out{
position: relative;
}
.item{
top:0;
position: absolute;
height: 400px;
}
.left{
background-color:antiquewhite;
width: 200px;
left: 0;
}
.right{
background-color: antiquewhite;
width: 200px;
right: 0;
}
.mid{
width: calc(100% - 400px);
left: 200px;
background-color: aqua;
}
重点:同样可使用calc计算宽度,但也可以通过ps的方法达到更好的兼容性
ps. mid也可以通过left:200px;right:200px实现
flex实现
点击查看代码
.out{
display: flex;
height: 400px;
}
.left,.right{
width: 200px;
background-color: antiquewhite;
}
.mid{
flex:auto;
background-color: aqua;
}
用flex:auto实现自适应
table实现
点击查看代码
.out{
display: table;
height: 400px;
width: 100%;
}
.item{
display:table-cell;
}
.left,.right{
width: 200px;
background-color: antiquewhite;
}
.mid{
width: calc(100% - 400px);
background-color: aqua;
}
用calc实现自适应
grid布局
点击查看代码
.out{
display: grid;
grid-template-rows: 400px;
grid-template-columns: 200px auto 200px;
}
.left,.right{
background-color: antiquewhite;
}
.mid{
background-color: aqua;
}
用grid-template-rows的auto属性实现自适应
本随笔参考b站前端小夏老师有关布局视频进行实践,仅做个人记录,十分感谢前辈们的分享
标签:常用,color,width,五种,background,left,calc,css,200px From: https://www.cnblogs.com/badpear/p/16821949.html