[英]I need help regarding nth-child's
Was never good with nth-child, other than :first-child
and :last-child
, but I need some help creating this type of layout: 对于nth-child来说永远不会好,除了
:first-child
和:last-child
,但我需要一些帮助来创建这种类型的布局:
Each "post" will be wrapped in a div with class called .summary-item
. 每个“post”都将包含在一个名为
.summary-item
的div中。 I'm using a fluid layout and have my site's content width to max-width: 1020px
. 我正在使用流畅的布局,并将我的网站内容宽度设置为
max-width: 1020px
。
Can anyone help me out here? 有人可以帮我从这里出去吗? Much appreciated!
非常感激!
<div class="summary-item">
First Post
</div>
<div class="summary-item">
Second
</div>
<div class="summary-item">
Third
</div>
<div class="summary-item">
Fourth
</div>
<div class="summary-item">
Fifth
</div>
Since you have a period of 5 ("Once the fifth post is done I need the whole structure to repeat"), all of your nth-child
calls will be based on 5n
. 由于你有5个句号(“第五个帖子完成后我需要整个结构重复”),你所有的
nth-child
电话都将基于5n
。 After that it's just addition: 之后它只是补充:
:nth-child(5n+1) {/* first block */}
:nth-child(5n+2) {/* second block */}
:nth-child(5n+3) {/* third block */}
:nth-child(5n+4) {/* fourth block */}
:nth-child(5n+5) {/* fifth block - could also be :nth-child(5n)
but the +5 improves readability */}
I went with slightly different markup ( final result ): 我的标记略有不同( 最终结果 ):
<article>
<header>
<h3>First Post</h3>
</header>
</article>
<!-- fill in the gap -->
<article>
<header>
<h3>Fifth Post</h3>
</header>
</article>
And the following rules: 以下规则:
article {
height: 10em;
box-sizing: border-box;
border: 5px solid #FFF;
}
article:nth-child(5n+1) {
width: 70%;
}
article:nth-child(5n+2) {
width: 30%;
margin: -10em 0 0 70%;
}
article:nth-child(5n+3) {
width: 50%;
}
article:nth-child(5n+4) {
width: 50%;
margin-right: 50%;
}
article:nth-child(5n+5) {
width: 50%;
height: 20em;
margin: -20em 0 0 50%;
}
Which gives me the layout presented in your concept image. 这给了我概念图中呈现的布局。
Fiddle: http://jsfiddle.net/ZLVV2/2/ 小提琴: http : //jsfiddle.net/ZLVV2/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.