布局之多列布局(multi-column)

css3中新出現(xiàn)的多列布局(multi-column)是對html布局模式的有力擴充撞蚕,它能輕松的讓文本呈現(xiàn)多列顯示蝎毡,就像報紙上的新聞排版一樣莹弊。

屬性

--column-count:設置列的個數(shù)努隙。數(shù)字為想要把文章分為的列數(shù)耕腾,瀏覽器會自動計算每 列的寬度。

?????? 如:將文字分成4列

??????? 代碼如下:

效果如下:

--column-width:設置每列的寬度蓬衡。設置后喻杈,瀏覽器會根據(jù)設置的寬度自動計算調整列數(shù),如果寬度不足兩列狰晚,則只顯示一列筒饰,寬度設置也將失效。

列寬為10rem時:瀏覽器根據(jù)列寬將其分為7列

列寬為10rem時:瀏覽器根據(jù)列寬將其分為3列

列寬為40rem時:瀏覽器寬度不足兩列時壁晒,只顯示1列

---columns:是column-count 和 column-width的簡寫,優(yōu)先保證寬度瓷们,在寬度?至少能達到指定寬度時,設置列列數(shù)秒咐。


除了想要設置列數(shù)和列寬外谬晕,我們有時還想要設置列間隙和列的邊框。

---column-gap(列間隙):建議值為1em

沒有設置列間隙時

代碼

設置后


列邊框設置包括邊框的顏色(column-rule-color)携取、線寬(column-rule-width)攒钳、線樣式(column-rule-style)。column-rule是這三個屬性的復合屬性雷滋。

column-rule-width:? thin/medium/thick/具體數(shù)值不撑。

column-rule-color: 顏色。

column-rule-style: dotted/dashed/solid晤斩。


當需要跨列設置時焕檬,我們可以用column-span進行設置

column-span:? 1/all;??????? 默認跨一列


為了保證瀏覽器最大的兼容性問題:我們可以在這些屬性前加上前綴:-webkit-,-moz-,-ms-。

??????

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末澳泵,一起剝皮案震驚了整個濱河市实愚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌兔辅,老刑警劉巖腊敲,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異幢妄,居然都是意外死亡兔仰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門蕉鸳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來乎赴,“玉大人忍法,你說我怎么就攤上這事¢藕穑” “怎么了饿序?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長羹蚣。 經(jīng)常有香客問我原探,道長,這世上最難降的妖魔是什么顽素? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任咽弦,我火速辦了婚禮,結果婚禮上胁出,老公的妹妹穿的比我還像新娘型型。我一直安慰自己,他們只是感情好全蝶,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布闹蒜。 她就那樣靜靜地躺著,像睡著了一般抑淫。 火紅的嫁衣襯著肌膚如雪绷落。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天始苇,我揣著相機與錄音砌烁,去河邊找鬼。 笑死埂蕊,一個胖子當著我的面吹牛往弓,可吹牛的內容都是我干的。 我是一名探鬼主播蓄氧,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼槐脏!你這毒婦竟也來了喉童?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤顿天,失蹤者是張志新(化名)和其女友劉穎堂氯,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體牌废,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡咽白,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸟缕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晶框。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡排抬,死狀恐怖,靈堂內的尸體忽然破棺而出授段,到底是詐尸還是另有隱情蹲蒲,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布侵贵,位于F島的核電站届搁,受9級特大地震影響,放射性物質發(fā)生泄漏窍育。R本人自食惡果不足惜卡睦,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望漱抓。 院中可真熱鬧表锻,春花似錦、人聲如沸辽旋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽补胚。三九已至码耐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間溶其,已是汗流浹背骚腥。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瓶逃,地道東北人束铭。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像厢绝,于是被迫代替她去往敵國和親契沫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案昔汉? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 淺談CSS3多列布局 相信大家都看過報紙懈万,報紙上的內容大多數(shù)都是分欄顯示的,如下圖所示: 現(xiàn)在靶病,強大的CSS3為我...
    haileym閱讀 2,267評論 0 0
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color会通,font,text-align娄周,li...
    wzhiq896閱讀 1,736評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color涕侈,font,text-align煤辨,li...
    love2013閱讀 2,306評論 0 11
  • CSS3提供了個新屬性columns用于多列布局裳涛。在這之前木张,有些大家習以為常的排版,要用CSS動態(tài)實現(xiàn)其實是比較困...
    張歆琳閱讀 5,162評論 2 6