当前位置:网站首页>三栏布局实现
三栏布局实现
2022-08-10 23:29:00 【柳晓黑胡椒】
三栏布局
实现三栏布局有7种方式
1.flex
body {
margin: 0;
}
.container {
display: flex;
min-width: 400px;
}
.container .left,
.container .right {
width: 100px;
height: 200px;
background-color: red;
}
.container .main {
flex: 1;
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
2.浮动 + margin
body {
margin: 0;
}
.container {
min-width: 400px;
}
.container .left,
.container .right {
width: 100px;
height: 200px;
background-color: red;
}
.container .left {
float: left;
}
.container .right {
float: right;
}
.container .main {
height: 200px;
margin: 0 100px;
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
<!-- 注意这种方式main容器药房最后面 -->
</div>;
3.浮动 + bfc
body {
margin: 0;
}
.container {
min-width: 400px;
}
.container .left,
.container .right {
width: 100px;
height: 200px;
background-color: red;
}
.container .left {
float: left;
}
.container .right {
float: right;
}
.container .main {
height: 200px;
display: flex;
/* 触发bfc 边框盒不会与浮动元素重叠*/
/* 1.浮动元素 2.绝对定位元素(absolute,fixed) 3.display(inline-block,flex) 4.overflow(不为visible) */
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
<!-- 注意这种方式main容器药房最后面 -->
</div>;
4.table-cell
body {
margin: 0;
}
.container {
display: table;
width: 100%;
min-width: 400px;
}
.container .left,
.container .right {
display: table-cell;
width: 100px;
height: 200px;
background-color: red;
}
.container .main {
display: table-cell;
height: 200px;
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>;
5.定位 + margin
body {
margin: 0;
}
.container {
position: relative;
width: 100%;
min-width: 400px;
}
.container .left,
.container .right {
position: absolute;
top: 0;
width: 100px;
height: 200px;
background-color: red;
}
.container .left {
left: 0;
}
.container .right {
right: 0;
}
.container .main {
margin: 0 100px;
height: 200px;
background-color: blue;
}
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>;
6.圣杯布局
注:达到最小宽度后,右边栏会被隐藏
body {
margin: 0;
}
.container {
margin: 0 100px;
min-width: 400px;
}
.container .main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
.container .left,
.container .right {
position: relative;
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.container .left {
left: -100px;
margin-left: -100%;
}
.container .right {
right: -100px;
margin-left: -100px;
}
<div class="container">
<!-- 圣杯布局的main是主体要放第一位 -->
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>;
7.双飞翼布局
body {
margin: 0;
}
.mainBox {
float: left;
width: 100%;
}
.mainBox .main {
float: left;
width: 100%;
height: 200px;
margin: 0 100px;
background-color: blue;
}
.left,
.right {
float: left;
width: 100px; /*给固定宽度*/
height: 200px;
background-color: red;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -100px;
}
<div class="mainBox">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
边栏推荐
猜你喜欢
随机推荐
Ndk 和Cmake报错解决
HPb59-1铅黄铜
基于Web的疫情隔离区订餐系统
How to bounce the shell
canvas
使用PageHelper自定义PageInfo进行分页+模糊查询
Pytorch面试题面经
VMware 虚拟机开启Ip地址自动更换解决
手机端出现Z-Fighting现象
HGAME 2022 Week2 writeup
【C语言篇】表达式求值(隐式类型转换,算术转换)
Mathematical modeling preparation knowledge
怎么关闭电脑广告
SurfaceView 的双缓冲
CDN原理与应用简要介绍
Parse method's parameter list (including parameter names)
关于弱监督学习的详细介绍——A Brief Introduction to Weakly Supervised Learning
十年架构五年生活-08 第一次背锅
HGAME 2022 Final writeup
Kubernetes 维护技术分享