如何 "clear" 一个 CSS 假 table 行？

Question

出于多种原因，我不得不伪造一个 table 来显示图像。我想显示几行，每行有 5 张图像。所以我必须在每第 6 张图片之前 "clear"（我知道这不是正确的词）开始新的一行。

这是画廊：

<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 行之前尝试 "clear" 的方式：

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

知道如何让它工作吗？

Answer 1

你非常接近...应该这样做：

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

你不需要 :before 伪装。

Answer 2

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

.td{
    display:inline;
}

备注我已将您的 img 标签替换为 a 标签。因为我没有大量的图像。你也可以使用 img 没有任何问题。

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

如何 "clear" 一个 CSS 假 table 行？

How to "clear" a CSS fake table row?

css

css-tables