浮动列在某些屏幕尺寸上无法正确对齐 [英] Floated columns not aligning correctly on certain screen sizes

问题描述

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

I have a problem with a CSS grid I built. The relevant site is this: http://dr-brauchle.de/ The wall of photos underneath the content is constructed with a grid of floated boxes. This works fine as long as all the boxes have fixed width and height values.

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

To make the site responsive I use percentages on the width of the boxes and "auto" on their height and the same applies to the images that are loaded into these boxes. The media query jumps in at 1199px and converts the static box sizes to fluid box sizes.

这会在特定分辨率下产生问题，其中第二个大图像框从左边距跳跃的页面向右移动，从而破坏网格的顺序。使浏览器窗口更大，使框再次跳到位置。这是非常讨厌，因为在iPad 3上的分辨率，例如也产生这个错误。

This produces problems at certain resolutions where the second large image box jumps from the left margin of the page to the right and thus destroys the order of the grid. Making the browser window bigger makes the box jump in to place again. This is very annoying since the resolution on an iPad 3 for example produces this error as well.

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

On the boxes (sse code below) I had to use a "line-height: 0" to eliminate gaps of a few pixel between the boxes. This seems to be part of the strange float-problem.

.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;
       }

非常感谢任何帮助！

Arne

推荐答案

所以我发现你需要强制宽高比。

So what I found is that you need to force an aspect ratio.

尝试修改以下样式：

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

Basically the modification above set up the box-1 to have a fixed aspect ratio then positionsw the img in in absolutely. To calculate the 13.75%, I took one of your images and got 165/300=.55 --> .55*.25=.1375 --> 13.75%

希望这解决了您的问题。

Hope this solves your issue.

参考

这篇关于浮动列在某些屏幕尺寸上无法正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！