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

I am working on a gallery grid (first block of 6 images) and I cannot for the life of me seeing why not all list items are displaying properly. It mostly displays correctly, however, if you downscale the browser, at about 700px, the items start flicking and not displaying as they should.

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

I usually use a right padding of 10px for my gallery items, as this didn't work on this occasion I have tried a right border of 10px but still the problem persists.

我通常使用10px的右边填充作为我的图库项目,因为这在这种情况下不起作用我尝试了10px的右边框但仍然问题仍然存在。

Can anyone see what the problem is? Live url is here.

任何人都可以看到问题是什么?直播网址就在这里。

Code is:

.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 个解决方案