Question

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

为了使网站具有响应性，我在框的宽度上使用了百分比，并且＆＃34; auto＆＃34;在它们的高度上，这同样适用于加载到这些盒子中的图像。媒体查询以1199px跳转并将静态框大小转换为流体框大小。

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

在方框（下面的sse代码）上，我不得不使用＆＃34;行高：0＆＃34;消除盒子之间几个像素的间隙。这似乎是奇怪的浮动问题的一部分。

.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 - ＆gt; .55 * .25 = .1375 - ＆gt; 13.75％

希望这能解决您的问题。

Reference

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

1 个答案: