- 左右布局
html
<div class="container1">
<div class="leftbox1">左列</div>
<div class="rightbox1">右列</div>
</div>
css
.leftbox1 {
width: 50%;
height: 300px;
background-color: #ddaace;
float: left;
}
.rightbox1 {
width: 50%;
height: 300px;
background-color: #8A6BBE;
float: right;
}
- 左中右布局
html
<div class="container2">
<div class="leftbox2">左側(cè)列</div>
<div class="midbox2">中間列</div>
<div class="rightbox2">右側(cè)列</div>
</div>
css
.leftbox2 {
height: 300px;
width: 30%;
float: left;
background-color: #B28FCE;
}
.midbox2 {
height: 300px;
width: 40%;
float: left;
background-color: #986DB2;
}
.rightbox2 {
height: 300px;
width: 30%;
float: right;
background-color: #77428D;
}
- 水平居中
text-align: center;
或者 通過給父元素設置 float五鲫，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現(xiàn)水平居中。
- 垂直居中
我們把包含文字元素的容器行高設置為大于字體大小并且等于元素的高度懦趋。
line-height: 300px拣技；
效果如下圖：
image.png
