div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局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);
css布局左边固定右边自适应height: 100%;
background-color: green;
}
</style>
⽅法2：采⽤ flex 布局，左右两侧宽度固定⼤⼩，中间设置flex:1，即可实现⾃适应
<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⾼，中间⾃适应占满
⽅法：使⽤绝对定位，把上⾯的和下⾯的分别设置top: 0; bottom: 0；固定在上下两端，中间距离上下
各200px 即可。
<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>
4、圣杯布局和双飞翼布局
圣杯布局和双飞翼布局解决的问题是⼀样的，都是两边固定宽度，中间⾃适应的三栏布局（与三栏布局的区别是 dom 结构必须是先写中间列部分，这样可以实现中间列优先加载），中间栏要在放在⽂档流前⾯以优先渲染。
4.1 圣杯布局（使⽤ float 布局框架，⽤ margin 为负值， position: relative 定位）
实现步骤：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。