有问题的页面:http://bit.ly/1xLOmeS
每三分之一的 LI 在底部都有不应该存在的额外间距。 我已经尝试使用 nth-child(奇数)和(偶数)如下所示,并且还尝试了 li:nth-child(2n+2) 条件并将右边距设置为 0px 以防止每个第二个框被移动到下一行。这个空间从哪里来??
CSS
ul.comment-card {
padding: 0;
margin: 0;
list-style: none;
}
.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;
height: 300px;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li .meta {
color: #767da1;
font-weight: 400;
line-height: 1.4em;
}
.comment-card .meta img {
position: relative;
top: -8px;
}
最佳答案
.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}
示例:jsFiddle
关于CSS :nth-child - extra spacing at bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27073644/