并非所有的列表项都正确地浮动

3
我正在处理一个画廊网格(第一个6张图片块),但我无法弄清楚为什么不是所有的列表项都正确显示。大部分情况下都可以正确显示,但如果缩小浏览器窗口大小到约700px时,这些项目开始闪烁,并且不能正确显示。
我通常会在我的画廊项目中使用10px的右填充,但这次不起作用了。因此,我尝试了一个10px的右边框,但问题仍然存在。
有人能看出问题所在吗?现场URL在这里
代码如下:
.feature {

    ul {
        list-style-type: none;
        margin: 0 -10px 30px 0;
        padding: 0 !important;

        li {
            border-right: 10px solid #ffffff;
            margin-bottom: 10px;
            position: relative;
            float: left;
            width: 33.33%;

            img {
                width: 100%;
            }

            .inner {
                position: absolute;
                padding: 20px;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }
        }
    }
}
1个回答

1
原因是您的图片原始宽高比:它们都是500x333像素,但第三个的尺寸是600x400像素,这使得它的自动高度略微大于其他所有情况下的高度。因此,当只有两个元素放入一行时,第五个li元素不会浮动在第三个元素下面,而是在旁边,因为第三个元素比第四个元素略高1像素。

最简单的解决方案是将第四个图像的原始大小更改为500x333像素


你是完全正确的!感谢您发现了这个问题 - 原来缩略图调整大小最初没有起作用。感谢您的帮助。 - CharlyAnderson

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接