1、利用左右浮动,脱离文档流,中间元素正常,设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后)
如果窗口太小,右边元素会被挤到下一行
<head>
<style>
.box{
height: 200px;
padding: 0 200px 0 100px;
}
.left{
width: 100px;
float: left;
margin-left: -100px;
background: red;
}
.right{
width: 200px;
float: right;
margin-right: -200px;
background: green;
}
.middle{
width: 100%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中间</div>
</div>
</body>
2、圣杯布局(注意:标签顺序:自适应的放前面,固定的放后面)
<head>
<style>
.box{
height: 200px;
padding: 0 200px 0 100px;
}
.left{
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
background: red;
}
.right{
width: 200px;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
background: green;
}
.middle{
width: 100%;
float: left;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="middle">中间</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
3、双飞翼布局(与圣杯布局的区别:自适应部分content又被包裹了一次,样式也从最外层box中的padding变成content中的margin,注意:中间的自适应会占左右位置)
<head>
<style>
.box{
height: 200px;
}
.left{
width: 100px;
float: left;
margin-left: -100%;
background: red;
}
.right{
width: 200px;
float: left;
margin-left: -200px;
background: green;
}
.middle{
width: 100%;
float: left;
background: blue;
}
.content{
margin: 0 200px 0 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="middle">
<div class="content">中间</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
4、利用绝对定位
<head>
<style>
.box{
height: 200px;
width: 100%;
position: relative;
}
.left{
width: 100px;
position: absolute;
top: 0px;
left: 0px;
background: red;
}
.right{
width: 200px;
position: absolute;
top: 0px;
right: 0px;
background: green;
}
.middle{
margin: 0 200px 0 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中间</div>
</div>
</body>
5、使用flex布局( flex 是 flex-grow、flex-shrink、flex-basis的缩写 flex:1 等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;)
<head>
<style>
.box{
display: flex;
flex-direction: row;
}
.left{
width: 100px;
background: red;
}
.right{
width: 200px;
background: green;
}
.middle{
background: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左</div>
<div class="middle">中间</div>
<div class="right">右</div>
</div>
</body>
6、利用calc()动态计算中间的值
<head>
<style>
.box{
height: 200px;
}
.left{
width: 100px;
float: left;
background: red;
}
.right{
width: 200px;
float: left;
background: green;
}
.middle{
width: calc(100% - 300px);
float: left;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左</div>
<div class="middle">中间</div>
<div class="right">右</div>
</div>
</body>