問題：1. 左右布局 2. 左中右布局
寫在最前：加border是為了看到container的寬高，方便做布局與居中,更清楚看到左右的布局
1.左右布局
Ⅰ. 使用float布局
html
<body>
<div class="container clearfix">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
CSS
.left{
background-color: red;
float: left;
}
.right{
float: right;
background-color: blue;
}
1.gpj.png
一. 可以通過調(diào)整寬度高度來(lái)調(diào)整大小
二. 也可以調(diào)整寬度百分比
PS ：方方說(shuō)，能不用寬高就不用。
Ⅱ. 使用 position
HTML
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.left{
position: relative;
background-color: red;
width: 50px;
}
.right{ top: 0;
right:100px;
position: absolute;
background-color: blue;
}
2.png
左側(cè)固定，右側(cè)可調(diào)整
2. 左中右布局
Ⅰ. 使用float布局
HTML
<div class="container clearfix">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
CSS
.container{
width: 300px;
border: 1px solid red;
height: 100px;
margin
}
.left {
width: 30%;
float: left;
background: red;
height:100%;
}
.mid{
width: 40%;
float: left;
background: green;
height:100%;
}
.right {
width: 30%;
float: right;
background: blue;
height:100%;
}
3.png
PS: 根據(jù)寬度百分比調(diào)整，使用float之后，元素順次流動(dòng)（float特點(diǎn)：在另一篇文章中會(huì)寫出來(lái) 《CSS學(xué)習(xí)筆記》），可以同行排列，相當(dāng)于display：block
也可以利用float做文字圍繞圖片效果。
Ⅱ. 使用position布局
HTML
<div class="container">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
CSS
*{
margin: o;
border: 0;
}
.container{
max-width:300px;
margin: 0 auto; //這一步使整個(gè)三欄居中
position: relative;
border: 1px solid red;
}
.left {
width: 50px;
height: 100%;
background-color: red;
position: absolute;
left: 0;
}
.mid {
background-color: green;
margin: 0 50px;
position: relative;
}
.right {
top: 0;
width: 50px;
height: 100%;
background-color: blue;
position: absolute;
right:0;
}
4.png
1.父元素設(shè)置position:relative;
2.left和right設(shè)置position:absolute;并且設(shè)置左右側(cè)欄的寬度值。
3.mid設(shè)置position:relative;
4.mid設(shè)置左右margin值，正好對(duì)應(yīng)左右側(cè)欄的寬度值
