说明
前半部分为常用布局实现，包括双飞翼，圣杯，flex
后半部分为布局练习
常用布局实现
-
双飞翼布局
常用的三列布局之一，左列右列宽度固定，中列宽度自适应。
demo地址：http://codepen.io/zld13455/pen/wzzwLa
//html部分
<div class="main-container">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
//css部分
.main-container {
float: left;
width: 100%;
height: 500px;
}
.main {
height: 500px;
background-color: aqua;
margin-left: 200px;
margin-right: 200px;
}
.left {
float: left;
width: 200px;
height: 500px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
background-color: blue;
}
-
圣杯布局
常用的三列布局之一，左列右列宽度固定，中列宽度自适应。
demo地址：http://codepen.io/zld13455/pen/JRRjoa
//html部分
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
//css部分
.container {
width：100%;
height: 300px;
padding-left: 200px;
padding-right: 200px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: aqua;
}
.left {
position: relative;
left: -200px;
margin-left: -100%;
float: left;
width: 200px;
height: 300px;
background-color: red;
}
.right {
position: relative;
right: -200px;
margin-left: -200px;
float: left;
width: 200px;
height: 300px;
background-color: blue;
}
布局练习
-
不设定A容器和B容器的宽度，使得C容器里面的A和B元素分栏
- 使用absolute
.c {
width: 500px;
height: 500px;
position: relative;
}
.a {
width: 100%;
height: 100%;
background-color: red;
}
.b {
position: absolute;
left:300px;
top:0px;
right: 0;
height: 100%;
background-color: blue;
}
