我正在处理图库网格(第一个 block ,包含 6 张图像),但我终其一生都无法理解为什么并非所有列表项都正确显示。它大部分都能正确显示,但是,如果您将浏览器缩小到大约 700 像素,元素就会开始闪烁并且无法正常显示。
我通常为我的画廊元素使用 10px 的右填充,因为这在这种情况下不起作用我尝试了 10px 的右边框,但问题仍然存在。
谁能看出是什么问题?直播网址为 here.
代码是:
.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%;
}
}
}
}
最佳答案
原因是图像的(原始)宽高比:它们都是 500x333px,但第三个是 600x400,这使得它的自动高度比所有其他情况下的略大。因此,第 5 个 li
元素不会 float 在第三个元素下方(当一行中只有两个元素时),而是在它旁边,因为第三个元素比第四个元素高约 1px。
最简单的解决方案是将第四张图片的原始大小更改为 500x333
关于html - 并非所有列表项都正确 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39932623/