显示缩略图时避免额外类的 CSS 技巧

Question

我使用以下缩略图类在我的内容包装器中显示 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) 但这也适用于跨浏览器吗？

Answer 1

您是否愿意添加额外的包装 div？

如果是这样，您可以使用旧的 bo​​otstrap 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 (宽度减少了一点)