浮动列在某些屏幕尺寸上无法正确对齐

Arne Robot 发表于 Dev

机器人机器人

我建立的CSS网格有问题。相关站点是：http : //dr-brauchle.de/内容下面的照片墙是用浮动框网格构成的。只要所有盒子的宽度和高度值都固定，就可以正常工作。

为了使站点具有响应性，我在框的宽度上使用百分比，在框的高度上使用“自动”，并且对加载到这些框中的图像也使用相同的百分比。媒体查询以1199px跳入，并将静态框尺寸转换为流体框尺寸。

这在某些分辨率下会产生问题，其中第二个大图像框从页面的左边距跳到右边，从而破坏了网格的顺序。使浏览器窗口更大可以使该框再次跳入位置。这非常令人讨厌，因为例如iPad 3上的分辨率也会产生此错误。

在盒子上（下面的sse代码），我不得不使用“ line-height：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;
}