655621268984102311.jpg
1、双飞翼
<body>
<div class="wrap">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<style type="text/css">
.wrap{
float: left;
width: 100%;
}
.main{
height: 200px;
background-color: green;
margin-left: 120px;
margin-right: 220px;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background-color: yellow;
margin-left: -200px;
}
.main{
height: 200px;
margin-left: 110px;
margin-right: 210px;
background-color: #01549b;
}
.left{
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: #bd4147;
}
.right{
float: left;
height: 200px;
width: 200px;
margin-left: -200px;
background-color: #419641;
}*/
</style>
</body>
2、flex实现圣杯
<body>
<!-- 圣杯布局 -->
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style type="text/css">
.container{
display: flex;
}
.main{
height: 200px;
margin: 0 10px 0 10px;
background-color: red;
flex-grow: 1;
}
.left{
order: -1;
height: 200px;
width: 100px;
flex-grow: 0;
background-color: green;
}
.right{
height: 200px;
width: 100px;
flex-grow: 0;
background-color: yellow;
}
</style>
</body>
3、圣杯布局
<body>
<!-- 圣杯布局 -->
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style type="text/css">
.container{
display: flex;
}
.main{
height: 200px;
margin: 0 10px 0 10px;
background-color: red;
flex-grow: 1;
}
.left{
order: -1;
height: 200px;
width: 100px;
flex-grow: 0;
background-color: green;
}
.right{
height: 200px;
width: 100px;
flex-grow: 0;
background-color: yellow;
}
</style>
</body>
