CSS 浮动图像,删除每行边距
我正在尝试对齐多个图像或 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这确实是一个常见的设计问题。我曾经通过向容器添加 10px 来修复它,但现在我总是使用 jQuery 修复:
请参阅 jsfiddle 此处
或者您可以仅使用 CSS,但这仅适用于真实浏览器(不适用于 <=IE8)
请参阅 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:
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
See jsfiddle here
听起来图像、填充和边距的总宽度对于容器宽度来说太宽了。尝试增加容器宽度来确认这一点。
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.