您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 多列

CSS3 多列

此節有 160 人學習過     參與評論

CSS3 多列

通過 CSS3,您能夠創建多個列來對文本進行布局 - 就像報紙那樣!

在本章中,您將學習如下多列屬性:

  • column-count
  • column-gap
  • column-rule

瀏覽器支持

屬性 瀏覽器支持
column-count
column-gap
column-rule

Internet Explorer 10 和 Opera 支持多列屬性。

Firefox 需要前綴 -moz-。

Chrome 和 Safari 需要前綴 -webkit-。

注釋:Internet Explorer 9 以及更早的版本不支持多列屬性。

CSS3 創建多列

column-count 屬性規定元素應該被分隔的列數:

實例

把 div 元素中的文本分隔為三列:

div
{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

親自試一試

CSS3 規定列之間的間隔

column-gap 屬性規定列之間的間隔:

實例

規定列之間 40 像素的間隔:

div
{
-moz-column-gap:40px;		/* Firefox */
-webkit-column-gap:40px;	/* Safari 和 Chrome */
column-gap:40px;
}

親自試一試

CSS3 列規則

column-rule 屬性設置列之間的寬度、樣式和顏色規則。

實例

規定列之間的寬度、樣式和顏色規則:

div
{
-moz-column-rule:3px outset #ff0000;	/* Firefox */
-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
column-rule:3px outset #ff0000;
}

親自試一試

新的多列屬性

下面的表格列出了所有的轉換屬性:

屬性 描述 CSS
column-count 規定元素應該被分隔的列數。 3
column-fill 規定如何填充列。 3
column-gap 規定列之間的間隔。 3
column-rule 設置所有 column-rule-* 屬性的簡寫屬性。 3
column-rule-color 規定列之間規則的顏色。 3
column-rule-style 規定列之間規則的樣式。 3
column-rule-width 規定列之間規則的寬度。 3
column-span 規定元素應該橫跨的列數。 3
column-width 規定列的寬度。 3
columns 規定設置 column-width 和 column-count 的簡寫屬性。 3

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (160人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 狠狠躁天天躁中文字幕无码| 高挑美女被遭强高潮摸下面| 国模人体| 欧美黑人肉体狂欢交换大派对| 亚洲av无码不卡在线观看| 青青青在线视频大杳蕉| 亚洲国产在线观看| 国产成人av电影在线观看第一页| 在线欧美三级在线高清观看| chinese国产videoxxxx实拍| 狠狠狠的在啪线香蕉| 日本黄又粗暴一进一出抽搐| 漂亮人妻洗澡被公强| >alexistexas| 日本5OO人群交完整视频| 妖孽奶爸在都市免费阅读| 18禁大尺度床戏在线播放| 夜夜高潮夜夜爽高清视频| 摩托车三个人一起做了起来| 中文无码字幕在线观看| 国产高清在线观看av片| 同性男男性娇喘视频网站| 国产精品视频超级碰| 国产成年女人特黄特色毛片免| 英语老师解开裙子坐我腿中间| 女邻居的大乳中文字幕| 日本卡一卡二卡三卡四免费| 暖暖直播很黄| 午夜男女很黄的视频| 天天躁夜夜躁狠狠综合| 我与岳的性真实故事全文阅读| http://www.boll-ag.com