我使用以下缩略图类在我的内容包装器中显示 4x3 缩略图:
.thumbnail
{
float:left;
width:300px;
height:200px;
margin-right:10px;
margin-bottom:10px;
}
标记是:
<div class=wrapper>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
<div class=thumbnail></div>
</div>
问题是我需要为每个具有 margin-right:0px
的第 4 个缩略图分配一个额外的类,否则它不适合内容包装器并且看起来像这样凌乱:
__ __ __
| |__| |__| |__| |
| __ __ __ |
| |__| |__| |__| |
| __ __ __ |
| |__| |__| |__| |
有没有更好的方法来避免这个额外的类? 谢谢
编辑: 我发现我可以使用 div.wrapper img:nth-child(4n) 但这也适用于跨浏览器吗?
最佳答案
您是否愿意添加额外的包装 div
?
如果是这样,您可以使用旧的 bootstrap 2.3.2 网格方法 - 通过使用负边距将额外的包装器向左移动,并使用 margin-left
而不是 margin-right
对于缩略图:
HTML:
<div class="wrapper">
<div class="row">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
</div>
CSS:
.row {
margin-left: -10px;
}
.thumbnail {
float:left;
width:300px;
height:20px;
margin-left: 10px;
margin-bottom:10px;
background: #ccc;
}
DEMO (宽度减少了一点)
关于显示缩略图时避免额外类的 CSS 技巧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18933334/