为什么我的列表项目拇指显示如下？

Question

嘿，我设置了一些断点，并设置了列表项目的百分比，它非常适合不同的断点。

但是我没有设置的默认设置就是这样显示的。

这是我的sass代码。

li
        {


            width:20%;
            padding: 2px;
            float:left;
                          @include media($xl-desktop) { // As defined in _grid-settings.scss
                            width:10%;
                          }

                          @include media($mobile) { // As defined in _grid-settings.scss
                            width:33.3333%;
                          }
                        }

请告诉我我在哪里做错了。 谢谢。 这是我的演示 Demo Link

Answer 1

你可以尝试这种布局吗？ 为了使图像响应你需要增加宽度：100％（你做了确切的对手）;

Make an image responsive - simplest way

http://jsfiddle.net/95EfW/

的CSS：

    ul{
    list-style: none;
}

li{
    float: left;
    padding:0;
    margin:0;
    width: 20%;
    padding: 4px;
}

img{
    width: 100%;
    height: 100%;
}

感谢您的演示，它有所帮助。所以这就是问题，问题是你的每个图像都有不同的大小，因此当你向左浮动时，它会将剩余的图像放在不同的屏幕上。要解决此问题，您有两种方法，使用内联块（而不是在li上浮动）或为不同大小的屏幕设置静态高度。这是一个设置高度的小型演示jsfiddle.net/f5cgT/2 - ravitadi 1小时前

Answer 2

这样可以防止浮动在清除每一行时掉落。

.galleryList li:nth-child(6n+6) {
  clear: left;
}

但图像的原始尺寸也应该是相同的500px x 750px。比你首先没有差距......