实现三列布局的三种方法
程序员文章站
2022-06-08 16:30:30
...
1.绝对定位
<div class="containt">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.containt{
background: lightcoral;
}
.left{
position: absolute;
width: 200px;
height: 400px;
top: 0;
left: 0;
background: lightblue;
}
.right{
position: absolute;
width: 200px;
height: 400px;
right: 0;
top: 0;
background: lightcyan;
}
.center{
height: 400px;
margin: 0 200px 0 200px;
background:lightpink;
}
2.float
x需要注意的是,因为浮动会使元素脱离文档流,所以我们需要将中间的元素放在html结构的最后,以免右侧的内容沉在中间内容的下面
<div class="wrap">
<div class="left">左侧</div>
<div class="right">右侧</div>
<!--必须将中间内容写在html结构的最后,否则右侧会沉在中间内容的下侧-->
<div class="middle">中间</div>
</div>
.wrap {
background: #eee;
overflow: hidden;
padding: 20px;
}
.left {
width: 300px;
height: 200px;
float: left;
background: red;
}
.right {
width: 220px;
height: 200px;
float: right;
background: lightblue;
}
.middle {
margin-left: 320px;
background: lightpink;
margin-right: 240px;
height: 200px;
}
3.flex布局
<div class="contain">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
.contain{
display: flex;
justify-content: space-between;
}
.left,.right,.center{
height: 100px;
}
.left{
width: 200px;
background:lightblue;
}
.right{
width: 200px;
background: lightcoral;
}
.center{
width: 100%;
margin: 0 20px;
background: lightgrey;
}
推荐阅读
-
vue.js与element-ui实现菜单树形结构的解决方法
-
Vue 中使用vue2-highcharts实现曲线数据展示的方法
-
Vue+ElementUI实现表单动态渲染、可视化配置的方法
-
flask框架实现连接sqlite3数据库的方法分析
-
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
-
Python使用win32com模块实现数据库表结构自动生成word表格的方法
-
基于CI(CodeIgniter)框架实现购物车功能的方法
-
JavaScript实现京东购物放大镜和选项卡效果的方法分析
-
python实现用于测试网站访问速率的方法
-
Django实现图片文字同时提交的方法