div+css常见布局:两列布局、三列布局、圣杯布局和双飞翼布局
1、两列布局:左边固定,右边自适应左右两侧,左侧固定宽度 200px,右侧自适应占满。方法1: 左侧采用 float:left 往左浮动,右侧 margin-left:200px,留出左侧内容的空间// html 代码<div class="divBox"><div class="left">左侧固定200px</div><div class="right
![](https://csdnimg.cn/release/devpress/public/img/ic-book.4f347164.png)
1、两列布局:左边固定,右边自适应
左右两侧,左侧固定宽度 200px,右侧自适应占满。
方法1: 左侧采用 float:left
往左浮动,右侧 margin-left:200px
,留出左侧内容的空间
// html 代码
<div class="divBox">
<div class="left">左侧固定200px</div>
<div class="right">右侧自适应</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.divBox {
height: 500px;
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: royalblue;
}
.right {
margin-left: 200px;
height: 100%;
background-color: skyblue;
}
</style>
方法2:左侧和右侧都采用 float:left
往左浮动,左侧宽度 200px,右侧宽度使用 calc()
函数实现,代码为:calc(100% - 200px);
// html 代码
<div class="divBox">
<div class="left">左侧固定200px</div>
<div class="right">右侧自适应</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.divBox {
height: 500px;
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: royalblue;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: skyblue;
}
</style>
方法3:采用 flex 实现,左侧固定大小,右侧设置 flex:1
,即可实现自适应
// html 代码
<div class="divBox">
<div class="left">左侧固定200px</div>
<div class="right">右侧自适应</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.divBox {
height: 500px;
background-color: pink;
/* flex 布局 */
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: royalblue;
}
.right {
flex: 1;
height: 100%;
background-color: skyblue;
}
</style>
2、三列布局:左右固定,中间自适应
左中右三列,左右各 200px 固定,中间自适应占满。
方法1:左侧和中间都采用 float:left
往左浮动,右侧往右浮动,左侧和右侧宽度都设为 200px,中间宽度使用 calc()
函数实现,代码为:calc(100% - 200px - 200px);
// html 代码
<div class="divBox">
<div class="left">左侧固定200px</div>
<div class="content">中间宽度自适应</div>
<div class="right">右侧固定200px</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.divBox {
height: 500px;
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: royalblue;
}
.right {
float: right;
width: 200px;
height: 100%;
background-color: skyblue;
}
.content {
float: left;
width: calc(100% - 200px - 200px);
height: 100%;
background-color: green;
}
</style>
方法2:采用 flex 布局,左右两侧宽度固定大小,中间设置 flex:1
,即可实现自适应
// html 代码
<div class="divBox">
<div class="left">左侧固定200px</div>
<div class="content">中间宽度自适应</div>
<div class="right">右侧固定200px</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.divBox {
height: 500px;
background-color: pink;
/* 采用 flex 布局 */
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: royalblue;
}
.right {
width: 200px;
height: 100%;
background-color: skyblue;
}
.content {
flex: 1;
height: 100%;
background-color: green;
}
</style>
3、三行布局:上下固定,中间自适应
上中下三行,头部 200px 高,底部 200px高,中间自适应占满
方法1:使用绝对定位,把上面的和下面的分别设置top: 0; bottom: 0;
固定在上下两端,中间距离上下各 200px 即可。
// html 代码
<div class="box">
<div class="top">头部200px高</div>
<div class="center">中间自适应</div>
<div class="bottom">底部200px高</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
background-color: pink;
}
.top {
position: absolute;
top: 0;
width: 100%;
height: 200px;
background-color: steelblue;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background-color: skyblue;
}
.center {
position: absolute;
top: 200px;
bottom: 200px;
width: 100%;
background-color: teal;
}
</style>
方法2:采用 flex 布局,flex-direction: column; 上下两侧高度固定大小,中间设置 flex:1,即可实现自适应.
4、圣杯布局和双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的,都是两边固定宽度,中间自适应的三栏布局(与三栏布局的区别是 dom 结构必须是先写中间列部分,这样可以实现中间列优先加载),中间栏要在放在文档流前面以优先渲染,即:
- 两侧内容宽度固定,中间内容宽度自适应。
- 三栏布局,中间一栏最先加载、渲染出来。
4.1 圣杯布局(使用 float 布局框架 , 用 margin 为负值 , position: relative 定位)
实现步骤:
(1)三个部分都设定为左浮动,否则左右两边内容上不去,就不可能与中间列同一行。然后设置 middle(中间部分) 的宽度为 100% (实现中间列内容自适应),此时,left 和 right 部分会跳到下一行。
(2)通过设置 margin-left 为负值让 left 和 right 部分回到与 middle 部分同一行显示。
(3)通过设置父容器的 padding-left 和 padding-right,让左右两边留出间隙。
(4)通过设置相对定位,让 left 和 right 部分移动到两边。
代码:
// html 代码
<!-- 圣杯布局 -->
<div class="container">
<div class="middle">中间自适应</div>
<div class="left">左边固定宽度200px</div>
<div class="right">右边固定宽度200px</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.container {
height: 300px;
/* 为左右栏腾出空间 */
padding: 0 200px 0;
background: pink;
}
.middle {
float: left;
width: 100%;
height: 300px;
background-color: turquoise;
}
.left {
float: left;
position: relative;
left: -200px;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: teal;
}
.right {
float: left;
position: relative;
left: 200px;
width: 200px;
height: 300px;
margin-left: -200px;
background-color: seagreen;
}
</style>
- 内部元素都是左浮动的,主要区域宽度100%;
- 左侧区域通过
margin-left: -100%;
使它浮动到左方,然后根据自身定位left:-200px;
将之移动到父容器的 padding 中。 - 右侧同理,只不过只需要 margin 自己本身的宽度。
- 结果:左右固定宽度 200px,中间自适应。
4.2 双飞翼布局
双飞翼布局同样也是三栏布局,在圣杯布局基础上进一步优化,解决了圣杯布局错乱问题,实现了内容与布局的分离。而且任何一栏都可以是最高栏,不会出问题。
双飞翼布局和圣杯差不多,主要是将 padding 换成了 margin 而且只需要包裹 middle 即可。
代码:
// html 代码
<!-- 双飞翼布局 -->
<div class="container">
<div class="middle">
<div class="inner">中间自适应</div>
</div>
<div class="left">左边固定宽度200px</div>
<div class="right">右边固定宽度200px</div>
</div>
// CSS 代码
<style>
* {
margin: 0;
padding: 0;
}
.container {
/* 确保中间内容可以显示出来,两倍left宽+right宽 */
min-width: 600px;
height: 300px;
background: pink;
}
.middle {
float: left;
width: 100%;
height: 300px;
background-color: turquoise;
}
.middle .inner {
/* 为左右栏腾出空间 */
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: teal;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
background-color: seagreen;
}
</style>
实现步骤(前两步与圣杯布局一样):
- 三个部分都设定为左浮动,然后设置 middle 的宽度为100%,此时,left 和 right 部分会跳到下一行。
- 通过设置 margin-left 为负值,让 left 和 right 部分回到与 middle 部分同一行。
- middle 部分增加一个内层 div,并设 margin: 0 200px。
缺点: 多加一层 dom 树节点,增加渲染树生成的计算量。
4.3 两种布局实现方式对比
- 两种布局方式都是把主列放在文档流最前面,使主列优先加载。
- 两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置:
- 圣杯布局是利用父容器的左、右内边距+两个从列相对定位。
- 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整。
推荐使用双飞翼布局。
5、布局常用方法
- Flex 布局
- 栅格布局
- 使用 BFC 隐藏属性
- float + margin
- absolute + margin
- 圣杯布局
- 双飞翼布局
更多推荐
所有评论(0)