Responsive design 浮动列在某些屏幕尺寸上未正确对齐

我构建的CSS网格有问题。相关网站如下： 内容下方的照片墙由浮动框构成。只要所有长方体都具有固定的宽度和高度值，这就可以正常工作

为了使网站更具响应性，我在框的宽度上使用百分比，在高度上使用“自动”，这同样适用于加载到这些框中的图像。介质查询以1199px跳转，并将静态盒大小转换为流体盒大小

这会在某些分辨率下产生问题，其中第二个大图像框会从页面的左边距跳到右边距，从而破坏网格的顺序。使浏览器窗口变大会使长方体再次跳入到位。这是非常恼人的，因为例如iPad3上的分辨率也会产生这种错误

在框（sse代码如下）上，我必须使用“线高度：0”来消除框之间几个像素的间隙。这似乎是奇怪的浮动问题的一部分

.box-1 {
       width: 25% !important;
       height: auto;
       display: block;
       overflow: hidden;
       float: left;
       background-size: cover !important;
       line-height: 0;
       }


.box-2 {
       width: 50% !important;
       height: auto;
       display: block;
       overflow: hidden;
       float: left;
       background-size: cover !important;
       line-height: 0;
       }

非常感谢你的帮助

---

所以我发现你需要强制一个纵横比

尝试修改以下样式：

.box-1 {
  width: 25% !important;
  height: 0;
  display: block;
  overflow: hidden;
  float: left;
  background-size: cover !important;
  line-height: 0;
  position: relative;
  padding: 13.75% 0 0 0;
}
.box-1 img {
  width: 100% !important;
  height: auto !important;
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

基本上，上述修改将box-1设置为具有固定的纵横比，然后将img绝对定位。为了计算13.75%，我拍了一张你的照片，得到了165/300=.55-->.55*.25=.1375-->13.75%

希望这能解决你的问题

---

看起来可能是四舍五入错误（每个小框的高度都超过了半个像素，导致错位）是的，JRulle，就是这样！它实际上帮助解决了这个问题，并给了我新的知识去思考。非常感谢你让我的胸部承受了巨大的压力！请在此处检查改进的站点：。干杯，ArneLook很棒@ArneRobot