为了实现左右两侧固定,中间内容宽度可调,发明的布局方式
- 圣杯布局
左中右在一个容器中,左右通过覆盖padding内容完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,footer {
background-color: skyblue;height: 50px;text-align: center;line-height: 50px;
}
.center,.left,.right {
float: left;
}
.left {
width: 100px;
left: -100px;
margin-left: -100%;
position: relative;
background-color: antiquewhite;
}
.right {
width: 100px;
background-color: antiquewhite;
right: -100px;
margin-left: -100px;
position: relative;
}
.center {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.wrap{
padding: 0 100px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<header>头部</header>
<div class="clearfix wrap">
<div class="center">主区域</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
</div>
<footer>底部</footer>
</body>
</html>
- 双飞翼布局
中间自己一个容器,左右分别通过覆盖margin显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,footer {
background-color: skyblue;height: 50px;text-align: center;line-height: 50px;
}
.center,.left,.right {
float: left;
}
.wrap {
width: 100%;
float: left;
}
.left {
width: 100px;
margin-left: -100%;
background-color: antiquewhite;
}
.right {
width: 100px;
background-color: antiquewhite;
margin-left: -100px;
}
.center {
margin: 0 100px;
height: 50px;
background-color: aquamarine;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<header>头部</header>
<div class="wrap">
<div class="center">主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域主区域</div>
</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
<footer class="clearfix">底部</footer>
</body>
</html>