CSS 浮动图像,删除每行边距

发布于 2024-12-19 13:25:00 字数 334 浏览 2 评论 0原文

我正在尝试对齐多个图像或 DIV。 我从 wordpress 获取内容。

#wrapper{    
width:800px;
}

.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}

这会导致最后一个图像转到下一行。

我发现

#wrapper div:first-child{
    margin-left:0px;
    }

第一行对我有帮助,但接下来的几行又“断了”。 如何将 6 张图像与 ^n 张图片对齐?

Im trying to align multiple Images or DIVs.
i get the content from wordpress.

#wrapper{    
width:800px;
}

.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}

This causes the last image to go to the next line.

i found

#wrapper div:first-child{
    margin-left:0px;
    }

helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

谁的年少不轻狂 2024-12-26 13:25:00

这确实是一个常见的设计问题。我曾经通过向容器添加 10px 来修复它,但现在我总是使用 jQuery 修复:

$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');

请参阅 jsfiddle 此处

或者您可以仅使用 CSS,但这仅适用于真实浏览器(不适用于 <=IE8)

.image:nth-child(6n+1) {
    margin-left:0px;
}

请参阅 jsfiddle 此处

That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:

$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');

See jsfiddle here

Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)

.image:nth-child(6n+1) {
    margin-left:0px;
}

See jsfiddle here

挽容 2024-12-26 13:25:00

听起来图像、填充和边距的总宽度对于容器宽度来说太宽了。尝试增加容器宽度来确认这一点。

Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文