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

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

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

你不需要：在psuedo之前。

Answer 2

只需将此代码放入您的CSS中即可正常使用。

.td{
    display:inline;
}

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

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

如何清除＆＃34;一个CSS假表行？

2 个答案: