1米母、兩列布局
左側(cè)定寬下愈，右側(cè)自適應(yīng)實(shí)現(xiàn)方法很多，我常用的float+margin+左側(cè)設(shè)置width
//css
.parent{
height: 200px;border: 1px solid black;
}
.left{
float: left;
width: 200px;
height: 100%;
background-color: yellow;
}
.right{
margin-left: 210px;
height: 100%;
background-color: red;
}
//html
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
image.png
也可以使用絕對(duì)定位實(shí)現(xiàn)。定位幾乎可以實(shí)現(xiàn)所有布局上鞠，但個(gè)人感覺(jué)不夠靈活~
2际邻、三列布局
兩邊定寬，中間自適應(yīng),
- 左右浮動(dòng)+中間margin實(shí)現(xiàn)
//css
.parent{
height: 200px;border: 1px solid black;
}
.left{
float: left;
width: 200px;height: 100%;
background-color: red;
}
.right{
float: right;
width: 200px;height: 100%;
background-color: yellow;
}
.middle{
height: 100% ;
margin-left: 210px;margin-right: 210px;
background-color: pink;
}
//html
<div class="parent">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
三列布局
當(dāng)寬度小于left+right的寬度時(shí)芍阎，右側(cè)會(huì)被擠掉下去世曾，最好給頁(yè)面一個(gè)min-width.
- 也可以使用定位實(shí)現(xiàn)
//css
.parent{
position: relative;
height: 200px;border: 1px solid black;
}
.left{
position: absolute;left: 0;top: 0;
width: 200px;height: 100%;background-color: red;
}
.middle{
margin-left: 210px;margin-right: 210px;height: 100%;
background-color: pink;
}
.right{
position: absolute;right: 0;top: 0;
width: 200px;height: 100%;background-color: yellow;
}
//html
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
