代码之家 › 专栏 › 技术社区 › herrfischer

如何“清除”CSS伪表行?

css-tables css

herrfischer · 技术社区 · 9 年前

出于几个原因,我不得不伪造一张表来显示图像。我想显示几行,每行5个图像。所以我必须在每六张图片之前“清除”(我知道这不是正确的词),才能开始新的一行。

这是画廊:

<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>

这就是我试图在第六排之前“清除”的方式:

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

你知道怎么让这个工作吗?

2 回复 | 直到 4 年前

YourFriend 9 年前

只需将这段代码放在css中,它就会正常工作。

.td{
    display:inline;
}

笔记我已经用标记替换了您的img标记。因为我没有太多的图像。你也可以毫无问题地使用img。

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

Aaron 9 年前

你离我很近。。。这应该做到:

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

你不需要:在psuedo之前。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前