Question

我正在制作一个画廊网格（第一块6张图片），我不能为我的生活看到为什么不是所有列表项都能正常显示。它大部分显示正确，但是，如果你缩小浏览器，大约700px，项目开始轻弹，不显示它们应该。

我通常使用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，这使得它的自动高度比在所有其他情况下略大。因此，第五个li元素不会在第三个元素下浮动（当只有两个符合一行时），但在它旁边，因为第三个元素比第四个元素高约1px。

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

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

1 个答案: