css3多列布局怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2022-03-02 16:34:00 來源：億速云閱讀：159 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“css3多列布局怎么實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3多列布局怎么實(shí)現(xiàn)”吧!

column-count：規(guī)定元素應(yīng)該被分隔的列數(shù)；最大列數(shù)。

column-fill：規(guī)定如何填充列；默認(rèn)值auto各列的高度隨內(nèi)容自動(dòng)調(diào)整，balance所有列高都設(shè)為最高的列高。

column-gap：規(guī)定列之間的間隔；默認(rèn)值normal，相當(dāng)于1em。需要注意的是，如果column-gap與column-width加起來大于總寬度的話，就無法顯示column-count指定的列數(shù)，會(huì)被瀏覽器自動(dòng)調(diào)整列數(shù)和列寬。

column-rule：設(shè)置所有column-rule-*屬性的簡(jiǎn)寫屬性；類似于border，區(qū)別是不占用任何空間，因此設(shè)了column-rule不會(huì)導(dǎo)致列寬的變化。另外如果邊框?qū)挾却笥赾olumn-gap列間距，將不會(huì)顯示邊框。

column-span：規(guī)定元素應(yīng)該橫跨的列數(shù)；默認(rèn)值none表示不跨列，all表示跨越所有列。例如文章標(biāo)題可以設(shè)成all來跨列。

column-width：規(guī)定列的寬度；給列定義個(gè)最小的寬度。默認(rèn)值為auto表示將根據(jù)column-count列的數(shù)量自動(dòng)調(diào)整列寬。

上述屬性中column-width和column-count是最常用的，這兩個(gè)屬性的簡(jiǎn)寫：columns；比如：

#col{

-moz-columns:128em;

-webkit-columns:128em;

columns:128em;

}

上述代碼中所聲明的意思就是列的寬度為：8em，但是總的列數(shù)不會(huì)超過12個(gè)。

下面我們就來看一個(gè)css3多列布局的完整實(shí)現(xiàn)代碼：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<style>

.div{

column-count:3;

column-gap:90px;

column-rule:1pxdashedgreen;

column-width:370px;

}

.divh2{

text-align:center;

-webkit-column-span:all;

}

</style>

</head>

<body>

<div>

<p>每個(gè)人都生活在成長(zhǎng)當(dāng)中，在成長(zhǎng)當(dāng)中也會(huì)有更多的夢(mèng)想，更多的堅(jiān)持！慢慢凝結(jié)成成長(zhǎng)的深海。我=畫畫</p>

<p>畫畫，這個(gè)愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動(dòng)，紙上一切都活了！走了起來！一片栩栩如生。在學(xué)校的一次美術(shù)課上，美術(shù)老師展示著別的班同學(xué)的畫，個(gè)個(gè)栩栩如生，活靈活現(xiàn)！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅(jiān)持學(xué)習(xí)美術(shù)，學(xué)號(hào)美術(shù)！讓我的手用筆一揮也能描述出這種境界！</p>

</div>

</body>

</html>

css3多列布局怎么實(shí)現(xiàn)

到此，相信大家對(duì)“css3多列布局怎么實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

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

css3多列布局怎么實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽