css - 为什么我的列表项缩略图是这样显示的？

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

感谢您的演示，它很有帮助。所以这就是问题所在，问题是您的每张图片大小不同，因此当您向左浮动时，它会将剩余的图片放在不同的屏幕上。要解决此问题，您有两种方法，使用内联 block (而不是 float 在 li 上)或为不同尺寸的屏幕设置静态高度。这是一个设置高度的小演示 ​​jsfiddle.net/f5cgT/2 – ravitadi 1 小时前