CSS3 跨列設(shè)置column-span
column-span主要用來定義一個分列元素中的子元素能跨列多少。column-width、column-count等屬性能讓一元素分成多列，不管里面元素如何排放順序，他們都是從左向右的放置內(nèi)容，但有時我們需要基中一段內(nèi)容或一個標(biāo)題不進行分列，也就是橫跨所有列，此時column-span就可以輕松實現(xiàn)，此屬性的語法如下。
column-span: none | all
取值說明
|
屬性值
|
屬性值說明
|
|
none
|
此值為column-span的默認值，表示不跨越任何列。
|
|
all
|
這個值跟none值剛好相反，表示的是元素跨越所有列，并定位在列的Ｚ軸之上。
|
例如：將第一個標(biāo)題跨越所有列，代碼：
column-span:all;
效果如下：
任務(wù)
在編輯器第33-37行輸入正確代碼，讓所有偶數(shù)段落和標(biāo)題，跨越所有列，注意瀏覽器的兼容性設(shè)置。補全代碼后效果如下：
溫馨提示：案例的效果如上圖所示才算順利通關(guān)，否則請再學(xué)習(xí)一遍本節(jié)的知識點！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨列設(shè)置column-span</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="columns">
<h2>我要分列顯示</h2>
<p>為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁面中方便實現(xiàn)類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現(xiàn)文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
.columns {
padding: 5px;
border: 1px solid green;
width: 900px;
margin: 20px auto;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-o-column-gap: 2em;
-ms-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 3px gray solid;
-moz-column-rule: 3px gray solid;
-o-column-rule: 3px gray solid;
-ms-column-rule: 3px gray solid;
column-rule: 3px gray solid;
}
h2{
background: green;
padding: 10px;
color: #fff;
}
h2,
p:nth-child(2n){
-webkit-？;
-moz-？;
-o-？;
-ms-？;
？;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
