1，二列布局总结
<div class="content">
<div class="left">
<p>Hello</p>
<p>I'am left</p>
</div>
<div class="right">
<p>Hi</p>
<p>I'am right</p>
</div>
</div>
1,.left{
200px;
float:left;
}
.right{
margin-left:200px;
}
2,
.content {
position: relative;
}
.left {
position: absolute;
background: #fcc;
200px;
}
.right {
background: #f66;
margin-left: 210px;
}
3,
.content {
display: flex;
}
.left {
/* position: absolute; */
background: #fcc;
200px;
}
.right {
background: #f66;
flex: 1;
}
4,
.content {
100%;
}
.left {
background: #fcc;
200px;
float: left
}
.right {
background: #f66;
overflow: hidden;
}
1,三列布局 的样式
圣杯布局
<div class="content">
<div class="main">
中间自适应区域
</div>
<div class="left">
<p>I'am left</p>
</div>
<div class="right">
<p>I'am right</p>
</div>
</div>
.content {
padding: 0 200px;
box-sizing: border-box;
}
.main {
background: #f66;
100%;
height: 100px;
float: left;
}
.left {
background: #fcc;
200px;
height: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
background: #fcc;
200px;
height: 100px;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
双飞翼布局
<div class="content">
<div class="main">
<div class="main_content">
中间自适应区域
</div>
</div>
<div class="left">
<p>I'am left</p>
</div>
<div class="right">
<p>I'am right</p>
</div>
</div>
css的布局
.content{
100%;
box-sizing:border-box;
}
.main{
100%;
float:left;
}
.main_content{
margin:0 200px;
}
.left{
200px;
float:left;
margin-left:-100%;
}
.right{
200px;
float:left;
margin-left:-200px;
}
3,flex
父级元素设置：display:flex,
设计宽段设置宽度
自使用的使用：flex:1
4,postion:
5,使用float
页面上：
<div class="content">
<div class="left">
<p>I'am left</p>
</div>
<div class="right">
<p>I'am right</p>
</div>
<div class="main">
中间自适应区域
</div>
</div>
css的样式
.left{
float:left;
200px;
}
.right{
float:right;
200px;
}
.main{
margin:0 200px;
}
6 BFC
固定的宽度设置float:left;
自适应的设置：overflow:hidden;