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

Question

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

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

这会在某些分辨率下产生问题，其中第二个大图像框从页面的左边距跳到右边，从而破坏了网格的顺序。使浏览器窗口变大会使框再次跳入到位。这很烦人，因为例如 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;
       }

非常感谢您的帮助！

阿恩

Answer 1

所以我发现你需要强制设置纵横比。

尝试修改以下样式：

.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%

希望这能解决您的问题。

Reference