前端三栏布局
1.实现的效果是左右定宽,中间自适应
2.float实现
- 实现原理
左右浮动,中间用margin进行分隔
```css - {
}margin: 0; padding: 0;
.main{
}/* display: flex; */ height: 100px;
.left{
}float: left; width: 100px; height: 100%; background-color: red;
.right{
}float: right; height: 100%; width: 200px; background-color: yellowgreen;
.center{
}height: 100%; width: 100%; margin: 0 200px 0 100px; background-color: aqua;
3.flex
/* 用flex布局实现 */
.main{
display: flex;
height: 100px;
}
.left{
width: 100px;
background-color: red;
}
.center{
flex: 1;
background-color: yellow;
}
.right{
width: 100px;
background-color: blue;
}
- 在目前看来,用浮动和flex布局是居多的,如果后我发现了新的布局方式,我会第一时间更新到我的博客上,总而言之,言而总之,
万物皆可flex(老ie😀了)
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 1371769065@qq.com