CSS3 多列

CSS3可以將文本內(nèi)容設(shè)計(jì)成像報(bào)紙一樣的多列布局,如下實(shí)例:

一、多列的屬性

以下幾個(gè)為CSS3的多列屬性:

·column-count

·column-gap

·column-rule-style

·column-rule-width

·column-rule-color

·column-rule

·column-span

·column-width

二、創(chuàng)建多列

column-count屬性指定了需要分割的列數(shù)。以下實(shí)例將

元素中的文本分為3列

代碼例子:

運(yùn)行效果:

三,多列屬性的實(shí)現(xiàn)

CSS3多列屬性

下表列出了所有CSS3的多列屬性:

代碼實(shí)現(xiàn):

實(shí)現(xiàn)效果:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 淺談CSS3多列布局 相信大家都看過報(bào)紙,報(bào)紙上的內(nèi)容大多數(shù)都是分欄顯示的,如下圖所示: 現(xiàn)在,強(qiáng)大的CSS3為我...
    haileym閱讀 2,374評(píng)論 0 0
  • CSS3 多列 CSS3 可以將文本內(nèi)容設(shè)計(jì)成像報(bào)紙一樣的多列布局,如下實(shí)例: 瀏覽器支持 表格中的數(shù)字表示支持該...
    鹿守心畔光閱讀 241評(píng)論 0 1
  • 1多列 創(chuàng)建多個(gè)列來對(duì)文本進(jìn)行布局 - 就像報(bào)紙那樣 1-1 創(chuàng)建多列 column-count 屬性規(guī)定元素應(yīng)該...
    隨意人生_1b90閱讀 247評(píng)論 0 0
  • 創(chuàng)建多列 column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù): 實(shí)例 1.column-count: numb...
    safiriGitHub閱讀 648評(píng)論 0 0
  • 我不是一個(gè)特別在意儀式感的人,所以對(duì)于某一天是什么日子之類的很不敏感。 比如今天是十二月的第一天,比如上周五是感恩...
    理想與你同在閱讀 1,789評(píng)論 10 26

友情鏈接更多精彩內(nèi)容