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

Question

我正在处理一个画廊网格（第一个 6 幅图像块），我无法终生了解为什么不是所有列表项都正确显示。它大部分都能正确显示，但是，如果您将浏览器缩小到大约 700 像素，则项目会开始闪烁并且无法正常显示。

我通常为我的画廊项目使用 10 像素的右填充，因为在这种情况下这不起作用我尝试了 10 像素的右边框，但问题仍然存在。

谁能看出问题所在？直播网址为here.

代码是：

.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%;
            }
        }
    }
}

Answer 1

原因是您的图片的（原始）宽/高比：它们都是 500x333 像素，但第三张是 600x400，这使得它的自动高度比其他所有情况都略大。因此，第 5 个 li 元素不会浮动在第三个下方（当只有两个排成一行时），而是在它旁边，因为第三个比第四个高约 1px。

最简单的解决方案是将第四张图片的原始尺寸更改为 500x333