【问题标题】:Margins between images with float: left浮动图像之间的边距:左
【发布时间】:2015-07-09 18:49:39
【问题描述】:

我想将 8 张图片放在 2 行中,问题是在图片下方会生成 5px 的边距。您可以看到 in the fiddle 图像位于带有 position:relative<div>,这是因为我要在里面放置一个带有附加信息的隐藏框(它有效,但我没有t 将其添加到小提琴中以免使事情复杂化)。

感谢您的帮助!

.projects{
    overflow:auto;
}

.project{
    width: 25%;
    float: left;
    position: relative;
}

.project img{
    width: 100%;
}

【问题讨论】:

    标签: css css-float margin


    【解决方案1】:

    这是由于垂直对齐。解决此问题的一种简单方法是在 img 元素上指定 vertical-align: top;

    .project img {
        vertical-align: top;
        width: 100%;
    }
    

    JSFiddle demo.

    【讨论】:

    • 谢谢詹姆斯!你帮了大忙,但我试图了解这背后的原因,但我不明白......这是怎么发生的?提前致谢!