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