嘿,我已经设置了一些断点,我设置了百分比列表项,它很适合不同的断点。
但我没有设置的默认值是这样显示的。
这是我的 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
最佳答案
你能试试这个布局吗? 要使图像具有响应性,您需要添加宽度:100%(您做的恰恰相反);
Make an image responsive - simplest way
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 小时前
关于css - 为什么我的列表项缩略图是这样显示的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23165632/