0

我使用以下缩略图类在我的内容包装器中显示 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>

问题是我需要为每个具有 的第 4 个缩略图分配一个额外的类margin-right:0px，否则它不适合内容包装器并且看起来像这样混乱：

   __   __   __
| |__| |__| |__|     |
|  __   __   __      |
| |__| |__| |__|     |
|  __   __   __      |
| |__| |__| |__|     |

有没有更好的方法来避免这个额外的课程？谢谢

编辑：我发现我可以使用 div.wrapper img:nth-child(4n) 但这也适用于跨浏览器吗？

4

2 回答 2

3

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

如果是这样，您可以使用旧的引导程序 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;
}

演示（宽度减小了一点）

于 2013-09-21T14:18:37.980 回答
0 
.thumbnail:nth-child(4n+0)
{
  margin-right:0px;
}

您可以使用此 css 在每行中每 4 个 div 添加额外的 css

于 2013-09-21T14:00:34.890 回答