css - 如何 "clear"一个 CSS 假表格行？

Question

出于多种原因，我必须伪造一个用于显示图像的表格。我想显示几行，每行有 5 张图像。所以我必须在每第 6 张图像之前“清除”(我知道这不是正确的词)以开始新的一行。

这是画廊:

<div class="table">
<div class="tr">
    <div class="td">
        <img src="img/logo-1.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-2.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-3.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-4.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-5.jpg" alt="">
    </div>
    <!-- i have to start a new row here ... -->
    <div class="td">
        <img src="img/logo-6.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-7.jpg" alt="">
    </div>
</div>
</div>

这就是我在第 6 行之前尝试“清除”的方式:

.td:nth-child(5n+6):before {
    display: block;
    content: "new line please";
}

知道如何让它工作吗？

Answer 1

只需将此代码放入您的 css 中即可正常工作。

.td{
    display:inline;
}

注意我已将您的 img 标签替换为 a 标签。因为我没有大量的图像。您也可以毫无问题地使用 img。

这是 jsfiddle http://jsfiddle.net/kvkr95sy/