1、两栏布局
左侧元素浮动,固定宽度,右侧元素设置overflow:hidden
触发BFC,实现宽度自适应。
2、圣杯布局
两侧宽度固定,中间自适应,中间盒子放到最前,最先渲染。
<style>
.container {
width: 100%;
height: 500px;
background-color: #ccc;
position: relative;
}
.main {
width: 100%;
height: 100%;
background-color: #f40;
}
.left {
width: 200px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
top: 0;
}
.right {
width: 200px;
height: 100%;
background-color: yellow;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<!-- 圣杯布局 -->
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
3、双飞翼布局
两侧宽度固定,中间自适应,中间盒子放到最前,最先渲染。
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: green;
}
.main {
height: 500px;
background-color: red;
}
.main-left {
float: left;
width: 200px;
height: 100%;
background-color: blue;
margin-left: -100%;
}
.main-center {
float: left;
width: 100%;
height: 100%;
background-color: yellow;
}
.main-right {
float: left;
width: 200px;
height: 100%;
background-color: black;
margin-left: -200px;
}
.footer {
width: 100%;
height: 100px;
background-color: peru;
}
</style>
</head>
<body>
<!-- 双飞翼布局 -->
<div class="header">header</div>
<div class="main">
<div class="main-center">center</div>
<div class="main-left">left</div>
<div class="main-right">right</div>
</div>
<div class="footer">footer</div>
</body>