共计 3357 个字符，预计需要花费 9 分钟才能阅读完成。
实现两边定宽，中间自适应
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>
