CSS并排浮動實現起來并不難,只需要掌握幾個基本的CSS屬性即可。首先,要讓兩個元素并排,需要設置它們的display屬性為inline-block或者float: left/right。
.left { float: left; width: 50%; } .right { float: right; width: 50%; }
接下來,為了避免產生布局混亂的問題,我們需要給它們一個父元素來清除浮動,最好的方式就是添加clearfix類:
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
最后,設置相應的寬度即可實現兩個元素的并排浮動,如下所示:
<div class="clearfix"> <div class="left"> // your content here </div> <div class="right"> // your content here </div> </div>
總結一下,想要實現并排浮動,需要注意以下幾點:
- 設置元素為inline-block或者float: left/right;
- 為元素的父元素添加clearfix類清除浮動;
- 設置相應的寬度,使兩個元素能夠平分父元素的寬度。