課程
/前端開發
/HTML/CSS
/十天精通CSS3
明明設置了p:nth-child(2n)，為什么是奇數行跨越所有列？
2016-11-16
源自：十天精通CSS3 10-6
正在回答
代碼是沒問題的，你要理解p:nth-child(2n)的意思，是p的父元素中為偶數的子元素，在這段代碼中p元素父親的第一個子元素是h2標簽，第二個子元素是p標簽，也就是p類標簽的第一個，所以你會認為是奇數行跨列，你把選擇器改成p:nth-of-type(2n)就會得到你想要的效果了
慕仙5556764 提問者
是否可以上傳一張運行結果的截圖？
在我這里運行沒有問題，第一段p跨列，第二段p分成3列，第三段p跨列，第四段p分成3列，
找到問題了，你的style標簽應該放在title標簽后面，否則不能正常解析utf-8，現在可以正常偶數行顯示了
下面是修改后的代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨列設置column-span</title>
<style>
.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-column-span:all;
? -moz-column-span:all;;
? -o-column-span:all;;
? -ms-column-span:all;;
? column-span:all;;
</style>
</head>
<body>
<div class="columns">
? <h2>我要分列顯示</h2>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
這個需要看一下代碼，方法沒有問題，可能是你的代碼哪里出了bug
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
2 回答對h2,p:nth-child(2n)，設置column-span:all,h2為什么也要跨列
5 回答p:nth-child(2n)應該是偶數的p段落跨列，為什么現在成了奇數的p段落跨列了？難道把h2標簽也算成p了？
2 回答為什么設置了column-span:all不能夸列顯示
3 回答p:nth-child(2n)的意思
1 回答關于可以跨越的列數
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-12-23
代碼是沒問題的，你要理解p:nth-child(2n)的意思，是p的父元素中為偶數的子元素，在這段代碼中p元素父親的第一個子元素是h2標簽，第二個子元素是p標簽，也就是p類標簽的第一個，所以你會認為是奇數行跨列，你把選擇器改成p:nth-of-type(2n)就會得到你想要的效果了
2016-12-14
是否可以上傳一張運行結果的截圖？
在我這里運行沒有問題，第一段p跨列，第二段p分成3列，第三段p跨列，第四段p分成3列，
2016-11-22
找到問題了，你的style標簽應該放在title標簽后面，否則不能正常解析utf-8，現在可以正常偶數行顯示了
下面是修改后的代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨列設置column-span</title>
<style>
.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-column-span:all;
? -moz-column-span:all;;
? -o-column-span:all;;
? -ms-column-span:all;;
? column-span:all;;
}
</style>
</head>
<body>
<div class="columns">
? <h2>我要分列顯示</h2>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
2016-11-16
<!doctype html>
<html>
<head>
<style>
<meta charset="utf-8">
<title>跨列設置column-span</title>
.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-column-span:all;
? -moz-column-span:all;;
? -o-column-span:all;;
? -ms-column-span:all;;
? column-span:all;;
}
</style>
</head>
<body>
<div class="columns">
? <h2>我要分列顯示</h2>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
? <p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
2016-11-16
這個需要看一下代碼，方法沒有問題，可能是你的代碼哪里出了bug