html - 并非所有列表项都正确 float

Question

我正在处理图库网格(第一个 block ，包含 6 张图像)，但我终其一生都无法理解为什么并非所有列表项都正确显示。它大部分都能正确显示，但是，如果您将浏览器缩小到大约 700 像素，元素就会开始闪烁并且无法正常显示。

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

谁能看出是什么问题？直播网址为 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

原因是图像的(原始)宽高比:它们都是 500x333px，但第三个是 600x400，这使得它的自动高度比所有其他情况下的略大。因此，第 5 个 li 元素不会 float 在第三个元素下方(当一行中只有两个元素时)，而是在它旁边，因为第三个元素比第四个元素高约 1px。

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