在網(wǎng)頁設(shè)計中,常常需要將兩段文本左右排列。這可以通過CSS中的float屬性實現(xiàn)。
.left { float: left; } .right { float: right; }
以上是兩個基本的樣式,可以通過類名分別應(yīng)用到對應(yīng)的文本中。
值得注意的是,使用float屬性會使得元素脫離文檔流,并且可能導(dǎo)致父元素?zé)o法包裹子元素。因此,我們需要在父元素中添加clearfix樣式來解決這個問題:
.clearfix::after { content: ""; display: block; clear: both; }
將以上樣式應(yīng)用到父元素中即可解決問題。
下面是一個簡單的示例:
<div class="parent clearfix"> <div class="left"> <p>左側(cè)文本</p> </div> <div class="right"> <p>右側(cè)文本</p> </div> </div>
這樣,左側(cè)文本和右側(cè)文本就會很好地左右排列了。