当前位置:网站首页>Three-column layout implementation
Three-column layout implementation
2022-08-10 23:41:00 【Liu Xiao black pepper】
三栏布局
Implement a three-column layout7种方式
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>
<!-- 注意这种方式mainContainer pharmacy last -->
</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>
<!-- 注意这种方式mainContainer pharmacy last -->
</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.圣杯布局
注:After reaching the minimum width,The right column will be hidden
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">
<!-- 圣杯布局的mainIt is the subject who should put first -->
<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; /*give fixed width*/
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>
边栏推荐
- 【C语言篇】操作符之 位运算符详解(“ << ”,“ >> ”,“ & ”,“ | ”,“ ^ ”,“ ~ ”)
- App基础优化三部曲:启动原理&黑白屏优化&启动时间优化
- HCTF 2018 WarmUP writeup
- 多语种翻译-多语种翻译软件免费
- 闭包详解,柯里化的含义及操作方法
- Geogebra 教程之 01 什么是Geogebra,真的可以提高我们数学水平么?
- 【ORACLE】什么时候ROWNUM等于0和ROWNUM小于0,两个条件不等价?
- How to quickly grasp industry opportunities and introduce new ones more efficiently is an important proposition
- Talking about cors
- promise详解
猜你喜欢
随机推荐
excel英文自动翻译成中文教程
【C语言】二分查找(折半查找)
花环灯问题
HFCTF 2021 Internal System writeup
编程语言为什么有变量类型这个概念?
iNFTnews | In the Web3 era, users will have data autonomy
十年架构五年生活-08 第一次背锅
DASCTF X SU 2022 writeup
小程序制作开发应遵循哪些原则?
6.0深入理解MySQL事务隔离级别与锁机制
PyTorch官方文档学习笔记(备忘)
线程相关知识点
好用的翻译插件-一键自动翻译插件软件
Kubernetes你不知道的事
GoldenGate中使用 exp/imp 进行初始化
Kubernetes 维护技术分享
Talk预告 | 中国科学技术大学和微软亚洲研究院联合培养博士生冷燚冲:语音识别的快速纠错模型FastCorrect
《剑指offer》题解——week2(持续更新)
u盘数据不小心删除怎么恢复,u盘数据删除如何恢复
Tencent Cloud Lightweight Application Server Configuration and Website Building Tutorial