二段文字并排排版在網頁制作中非常常見,通過CSS的float屬性和width屬性就可以實現。下面我們來具體了解一下。
首先,HTML代碼結構如下:效果就是你可以在頁面中看到的樣子,左右兩側的文本內容均分頁面的寬度,并排排版。
<div class="wrapper"> <div class="left"> <p>左側文本內容...</p> </div> <div class="right"> <p>右側文本內容...</p> </div> </div>代碼中,我們用一個名為wrapper的div元素包含兩個子元素,分別是名為left的div元素和名為right的div元素。兩個子元素中,分別包含需要排版的文本。 然后,我們需要使用CSS來實現二段文字并排。代碼如下:
.wrapper { overflow: hidden; } .left { float: left; width: 50%; } .right { float: left; width: 50%; }代碼中,我們為wrapper元素設置了overflow:hidden屬性,這是為了清除浮動元素的影響,保證父元素可以包含子元素。 然后,我們為left和right元素分別設置了float:left和width:50%屬性,這樣就可以實現左右對齊,并排排版的效果了。 最后,讓我們來看一下實際效果:
左側文本內容...
右側文本內容...