CSS3提供了column屬性,讓我們可以將文本進行分列排版,實現報紙/雜志等的效果。本文主要介紹如何使用CSS3的column實現橫向排版。
首先,我們需要將要排版的文本放在一個容器內。可以使用div元素作為容器,并設置寬度和高度,如下所示:
<div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat posuere varius. Donec lacinia justo at mauris suscipit, semper interdum nunc mattis. Mauris tincidunt auctor leo ac egestas. Etiam dolor sapien, fermentum a vestibulum vitae, luctus nec nisi. Sed imperdiet libero sapien, in dictum risus vestibulum vitae. Nam eu leo nec mauris maximus malesuada. Cras consequat ornare justo id gravida.</p> </div>
接下來,我們需要使用CSS3的column屬性進行分列排版。首先,我們需要設置column-count屬性,指定排版的列數。
.container { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
在上面的代碼中,我們使用了廠商前綴,確保代碼兼容不同的瀏覽器。現代瀏覽器已經支持不加前綴的column屬性了。
此時,我們的文本已經被排版成3列,但是它們是縱向排列的。我們需要使用column-direction屬性來指定排版方向。
.container { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-direction: horizontal; -moz-column-direction: horizontal; column-direction: horizontal; }
在上面的代碼中,我們將column-direction屬性設置為horizontal,即橫向排列。
現在,我們的文本已經被橫向排列了。但是,由于文本被分割成多個小段落,可能會導致元素的高度不一致。我們可以使用column-fill屬性,讓文本在列之間平均分布,從而讓列高度更加均勻。
.container { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-direction: horizontal; -moz-column-direction: horizontal; column-direction: horizontal; -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; }
到此為止,我們已經完成了使用CSS3 column實現橫向排版的代碼。具體效果可以通過瀏覽器來查看。