實現兩邊定寬，中間自適應
1.聖盃佈局
首先html結構如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聖盃佈局</title>
</head>
<body>
<div class="content">
<div class="middle">2111111111111</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>css部分
<style>
*{
margin: 0;
padding: 0;
}
.middle{
background: pink;
width: 100%;
}
.left{
background: blueviolet;
width: 200px;
}
.right{
background: blanchedalmond;
width: 200px;
}
.middle,.left,.right{
height: 100px;
}
</style>效果如下圖，現在我們要讓left,和right懸浮在middle兩側
我們給middle、left、right都設置float：left,left讓它懸浮在左側設置margin-left:-100%(負的中間元素的寬度),right讓它懸浮在右側設置margin-right:-200px(負的自身的寬度)現在效果如下：
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
.left,right,.middle{
float:left;
}現在要解決的是中間部分被left遮擋住了
給.content設置padding左右兩邊的.left、.right寬度, .left、.right設置相對定位
.content{
padding:0 200px;
}
.left,.right{
position:relative;
}
.left{
left:-200px;
}
.right{
right:-200px;
}這樣可以實現兩邊定寬，中間自適應完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聖盃佈局</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
padding: 0 200px;
}
.middle{
background: pink;
width: 100%;
}
.left{
background: blueviolet;
width: 200px;
margin-left: -100%;
left: -200px;
}
.right{
background: blanchedalmond;
width: 200px;
margin-left: -200px;
right: -200px;
}
.middle,.left,.right{
height: 100px;
float: left;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<div class="middle">2111111111111</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>效果圖如下:
2.雙飛翼佈局
html結構如下
<div class="content">
<div class="middle"><div>211111111</div></div>
<div class="left">left</div>
<div class="right">right</div>
</div>css
.middle{
width: 100%;
background: paleturquoise;
height: 200px;
float: left;
}
.middle div{/*就是在middle裏面添加div設置margin值實現中間自適應*/
margin-left: 200px;
margin-right: 200px;
}
.left{
background: palevioletred;
width: 200px;
height: 200px;
float: left;
font-size: 40px;
color: #fff;
margin-left:-100%;
}
.right{
width: 200px;
height: 200px;
background: purple;
font-size: 40px;
float: left;
color: #fff;
margin-left:-200px;
}完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙飛翼佈局</title>
<style>
* {
margin: 0;
padding: 0;
}
.middle {
width: 100%;
background: paleturquoise;
height: 200px;
float: left;
}
.middle div {
margin-left: 200px;
margin-right: 200px;
}
.left {
background: palevioletred;
width: 200px;
height: 200px;
float: left;
font-size: 40px;
color: #fff;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
background: purple;
font-size: 40px;
float: left;
color: #fff;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="content">
<div class="middle">
<div>211111111</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>聖盃佈局，雙飛翼佈局的區別
都是兩邊定寬，中間自適應中間部分放在文檔流前面，全部都是設置float:left，區別在於中間部分不被遮擋。雙飛翼佈局middle裏面添加div設置左右的margin值
彈性盒佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈性盒子</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
display: flex;
width: 100%;
}
.content{
display: flex;
height: 200px;
width: 100%;
}
.left{
background: blueviolet;
height: 200px;
}
.middle{
background: yellow;
flex: 1;
}
.right{
background: orange;
height: 200px;
}
.left,.right{
width: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="middle">11111111</div>
<div class="right"></div>
</div>
</body>
</html>