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

如何“清除”CSS伪表行?

css-tables css

herrfischer · 技术社区 · 11 年前

出于几个原因,我不得不伪造一张表来显示图像。我想显示几行,每行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 回复 | 直到 5 年前

YourFriend 11 年前

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

.td{
    display:inline;
}

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

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

Aaron 11 年前

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

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

你不需要:在psuedo之前。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前