第一种:float+margin
.left{
float: left;
width: 200px;
height: 200px;
background: red;
}
.right{
width: 200px;
height: 200px;
float: right;
background: blue;
}
.main{
height: 200px;
margin-left: 200px;
margin-right: 200px;
background: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
第二种:float+bfc
.left {
float: left;
width: 200px;
height: 200px;
background: red;
}
.right{
float: right;
background: blue;
width: 200px;
height: 200px;
}.main{
height: 200px;
overflow: hidden;
background: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
第三种:flex布局
.container{
height: 200px;
display: flex;
justify-content: space-between;
}
.left{
width: 200px;
height: 200px;
background: red;
}
.right{
width: 200px;
height: 200px;
background: blue;
}
.main{
flex: 1;
background: green;
}
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
第四种:table布局
.container{
display: table;
width: 100%;;
}
.left
{
height: 200px;
display:table-cell;
background: red;
}
.main{
height: 200px;
display: table-cell;
background: blue;
}
.right{
height: 200px;
display: table-cell;
background: green;
}
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
第五种:position
需要这注意 main 的位置。
.container{
position: relative;
}
.left{
position: absolute;
width: 200px;
height: 200px;
left: 0;
background: red;
}
.right{
position: absolute;
width: 200px;
height: 200px;
background: blue;
/* 必须写这个 和 main书写位置有关系*/
/* top: 0; */
right: 0;
}
.main{
height: 200px;
margin: 0 200px;
background: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<!-- main写在中间得加top -->
<div class="main"></div>
</div>
第六种:圣杯布局
.container{
margin: 0 200px;
}
.main{
float: left;
width: 100%;
height: 200px;
background: red;
}
/* 被注释的地方还可以用相对定位去实现
position:relative;
left:-200px;/right:-200px;
*/
.left{
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
/* transform: translateX(-200px); */
background: blue;
}
.right{
float: left;
width: 200px;
height: 200px;
/* transform: translateX(200px); */
margin-left: -200px;
background:green;
}
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
第七种:双飞翼布局
<style>
.container {
float: left;
width: 100%;
height: 200px;
background: red;
}
.main {
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
background: blue;
}
.right {
float: left;
width: 200px;
height: 200px;
margin-left: -200px;
background: green;
}
</style>
<body>
<div class="container">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>