二栏布局
1、利用 calc 计算宽度的方法。
.left {
float: left;
height: 50px;
width: 200px;
background-color: red;
}
.right {
height: 50px;
width: calc(100%-200px);
background-color: blue;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
2、利用 float 配合 margin 实现。
.left {
float: left;
height: 50px;
width: 200px;
background-color: red;
}
.right {
height: 50px;
margin-left: 200px;
background-color: blue;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
3、利用 float 配合 overflow 实现。
.left {
float: left;
height: 50px;
width: 200px;
background-color: red;
}
.right {
height: 50px;
background-color: blue;
overflow: hidden;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
4、利用flex实现。
.contain{
display: flex;
}
.left {
height: 50px;
width: 200px;
background-color: red;
}
.right {
height: 50px;
width: 100%;
background-color: blue;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
三栏布局
1、float-margin方法。
缺点:由于DOM结构限制左-右-中
,主要内容无法最先加载。高度中间高度超出且没有margin的情况下会出问题(文字环绕):解决方案为清除浮动或创建BFC(实质也是清除浮动)。
.left {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 200px;
margin-right: 200px;
height: 200px;
background-color: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
2、BFC规则
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
3. 圣杯布局
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
/*如果container没有margin-left就不用设置以下内容*/
position: relative;
left: -100px;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
/*如果container没有margin-right就不用设置以下内容*/
position: relative;
right: -100px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
.container{
margin-left: 100px;
margin-right: 100px;
}
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
4. 双飞翼布局
.main {
float: left;
height: 200px;
width: 100%;
background-color: yellow;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 100px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
<div class="container">
<div class="main">
<div class ="container"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
5、flex布局
.container{
display: flex;
}
.main {
height: 200px;
width: 100%;
background-color: yellow;
}
.left {
height: 200px;
order: -1;
width: 100px;
background-color: red;
}
.right {
width: 100px;
height: 200px;
background-color: blue;
}
<div class="container">
<div class ="main">111</div>
<div class="left"></div>
<div class="right"></div>
</div>