方法一:flex
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container{
display: flex;
min-height: 300px;
}
.main{
flex-grow: 1;
background-color: #5F9EA0;
}
.left{
order: -1;
flex-basis: 200px;
background-color: #FAEBD7;
}
.right{
flex-basis: 300px;
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
方法二:float+margin
<style type="text/css">
.left-01 {
float: left;
background-color: red;
width: 150px;
height: 50px;
}
.right-01 {
float: right;
background-color: yellow;
width: 200px;
height: 50px;
}
.middle-01 {
margin: 0 200px 0 150px;
background-color: #fff9ca;
height: 50px;
}
</style>
</head>
<body>
<div>
<div class="left-01"><span>div-left</span></div>
<div class="right-01"><span>div-right</span></div>
<!--根据float对后面元素的影响,主元素要放在文档流最后-->
<div class="middle-01"><span>div-middle</span></div>
</div>
</body>
方法三:使用BFC原理,将middle设为overflow: hidden;
.left-01 {
float: left;
background-color: red;
width: 150px;
height: 50px;
}
.right-01 {
float: right;
background-color: yellow;
width: 200px;
height: 50px;
}
.middle-01 {
overflow: hidden;
background-color: #fff9ca;
height: 50px;
}
方法四:圣杯布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.container {
padding: 0 310px 0 210px;
}
.main,
.left,
.right {
position: relative;
float: left;
height: 300px;
}
.main {
width: 100%;
background-color: #FAEBD7;
}
.left {
width: 200px;
margin-left: -100%;
left: -210px;
background-color: aquamarine;
}
.right {
width: 300px;
margin-left: -300px;
right: -310px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
方法五:双飞翼模式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.main, .left, .right{
min-height: 300px;
float: left;
text-align: center;
}
.left{
margin-left: -100%;
width: 200px;
background-color: #5F9EA0;
}
.right{
margin-left: -300px;
width: 300px;
background-color: #FAEBD7;
}
.main{
width: 100%;
background-color: #7FFFD4;
}
.content{
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>