CSS3 多列布局簡介

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

CSS3提供了一個(gè)新屬性columns用于多列布局。在這之前，有些常見的排版用CSS動(dòng)態(tài)實(shí)現(xiàn)其實(shí)是比較困難的，如豎版報(bào)紙布局，如圖所示。

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

width: 800px;

border:1px solid red;

column-count: 3;

column-gap: 40px;

column-rule-color: red;

column-rule-width: 5px;

column-rule-style: dotted;

}

</style>

</head>

<body>

<div>

北京時(shí)間6月16日，勇士隊(duì)舉行了盛大的冠軍游行慶典。在總決賽期間異常冷靜的德雷蒙德-格林，終于憋不住了。僅僅在慶典期間，他就三懟詹姆斯。而詹姆斯也隔空予以了回應(yīng)。

　　在今天的冠軍慶典中，格林穿了一件印有“Quickie”字樣的T恤。而所謂“Quickie”，指的就是騎士主場速（Quicken）貸中心球館。而在接受采訪時(shí)，格林直言不諱地指出：“這個(gè)Q就是他們的球館名字，叫他們趕快出來，我這會(huì)兒在等他們?！?/p>

　　此外，這件T恤的含義有勇士擊敗騎士的速度很快。格林甚至表示，這件T恤本來是準(zhǔn)備在第四場橫掃騎士之后穿的，只不過騎士那天扳回一局，就留到了今天。

　　格林此舉，顯然是為了回應(yīng)詹姆斯在去年擊敗勇士后，回到克利夫蘭機(jī)場時(shí)身穿了一件“終極勇士”字樣的T恤。只不過，當(dāng)時(shí)也有人認(rèn)為詹姆斯是在暗諷勇士，但詹姆斯本人卻稱這只是一個(gè)巧合，因?yàn)椤捌渌囊路幌銠壗窳恕薄?/p>

</div>

</body>

</html>

豎版報(bào)紙布局在以前是很難實(shí)現(xiàn)的，比較穩(wěn)妥的方法是通過JavaScript來實(shí)現(xiàn)，并且操作非常繁瑣。但是有了CSS3的columns屬性之后，一切將會(huì)變得非常容易：因?yàn)樵贑SS3中可以使用多列布局。

多列布局在Web頁面中的使用其實(shí)很頻繁，常見的有如瀑布流般的照片背景墻、移動(dòng)端的響應(yīng)式布局等。

相關(guān)視頻回答

回復(fù)(0)