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