0

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

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

在此处输入图像描述 这是我的 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%;
                          }
                        }

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

4

2 回答 2

0

你可以试试这个布局吗？要使图像具有响应性，您需要添加 width: 100% （您做了完全相反的操作）；

使图像响应 - 最简单的方法

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

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

于 2014-04-19T04:27:06.170 回答
0

这将防止浮动在您清除每一行时掉落。 

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

但是图像的原始尺寸也应该是相同的 500px x 750px。比你一开始就不会有差距......

于 2014-04-20T00:22:22.433 回答