CSS3如何創(chuàng)建多列

發(fā)布時(shí)間：2022-02-24 13:54:29 來(lái)源：億速云閱讀：97 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了CSS3如何創(chuàng)建多列，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS3創(chuàng)建多列

column-count屬性指定了需要分割的列數(shù)。

以下實(shí)例將<div>元素中的文本分為3列：

實(shí)例

div {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

}

CSS3多列中列與列間的間隙

column-gap屬性指定了列與列間的間隙。

以下實(shí)例指定了列與列間的間隙為40像素：

實(shí)例

div {

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3如何創(chuàng)建多列”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡