Question

有谁知道如何解决这个问题。唯一可以正常工作的浏览器是Firefox;在Chrome和Edge中它不起作用。当我调整屏幕大小时，框会改变位置。有一些解决方案吗？

截图

HTML

<div class="box" style="background:#F00; height:200px;"></div>
<div class="box" style="background:#F0F; width:25%"></div>
<div class="box" style="background:#FF0; width:25%"></div>
<div class="box" style="background:#00F; width:25%"></div>
<div class="box" style="background:#55F; width:25%"></div>

CSS

.box {
  width: 50%;
  height: 100px;
  float: left
}

的JavaScript

$(window).resize(resize)

function resize() {
  $(".box").each(function() {
    $(this).height( $(this).width() * 0.5)
  });
}

这是Codepen链接： http://codepen.io/Tufik/pen/rxyQmV

UPDATE ---------

我修改了CodePen以显示更复杂的结构。问题是当你调整屏幕浏览器的大小时，div不会尊重正确的位置，一些div会跳到下一行。

这是一个老问题。我认为这是因为HTML不是像素完美的。但我想知道是否有一些简单的解决方案不同使用masonry.js或任何插件。 Firefox运行良好，但Chrome或Edge没有。

Answer 1

问题：不可预知的浏览器舍入整数

每个浏览器以不同方式计算数字。对于宽度和高度，浏览器也会舍入到最接近的布局整数。因此，在从百分比转换并填充容器之后，每个浮动框的计算像素宽度可以具有不同的初始值。计算这些数字可能会导致不可预测的结果。

以下是如何在您的设置中计算值的示例（调整浏览器大小并观察值的变化）：

＆＃13;

function resize() {
  $(".box").each(function() {
    var height = $(this).width() * 0.5;
    $(this)
      .height(height)
      .html("<code>height: " + $(this).height() + "px (rounded from " + height + ")</code>");
  });
}

$(window).resize(resize);
resize();

＆＃13;

.box { float: left; }
.box-large {
  width: 50%;
  height: 200px;
}
.box-small {
  width: 25%;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-large" style="background:#F00;"></div>
<div class="box box-small" style="background:#F0F;"></div>
<div class="box box-small" style="background:#FF0;"></div>
<div class="box box-small" style="background:#00F;"></div>
<div class="box box-small" style="background:#55F;"></div>

＆＃13;

解决方案：统一应用您自己的舍入整数

解决此问题的一种方法是创建自己的新高度值，将其四舍五入为整数并将其统一应用于每个框，而不是应用小数值并依赖浏览器进行舍入。执行此操作的最佳方法是从一个框中计算新的高度值并将其应用于其他框，而不是对每个框进行计算。

因为你有两个不同大小的盒子，我们进行两次计算：一次用于大盒子，一次用于小盒子。计算出的大高度值将应用于所有大型框（在本例中仅为一个），计算出的小高度值将应用于所有小框。

示例：

＆＃13;

function resize() {
  var $larges  = $('.box-large'),   // Get all large boxes
      $lgFirst = $($larges.get(0)), // Get first large box
      lgHeight = Math.floor(        // Round down before the browser screws it up
        $lgFirst.width() / 2        // Calculate new height
      ),
      $smalls  = $('.box-small'),   // Get all small boxes
      $smFirst = $($smalls.get(0)), // Get first small box
      smHeight = Math.floor(        // Round down before the browser screws it up
        $smFirst.width() / 2        // Calculate new height
      ),
      
      // Function returns a function to keep things DRY
      setHeight = function(height) {
        
        // This function is returned to the .each() call later
        return function () {
          $(this)
            .height(height)
            .html("<code>height: " + height + "px</code>"); 
        }
      };
  
  // Set height of all large boxes to new large height
  $larges.each(setHeight(lgHeight));
  
  // Set height of all small boxes to new small height
  $smalls.each(setHeight(smHeight));
}

$(window).resize(resize);
resize();

＆＃13;

.box { float: left; }
.box-large {
  width: 50%;
  height: 200px;
}
.box-small {
  width: 25%;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-large" style="background:#F00;"></div>
<div class="box box-small" style="background:#F0F;"></div>
<div class="box box-small" style="background:#FF0;"></div>
<div class="box box-small" style="background:#00F;"></div>
<div class="box box-small" style="background:#55F;"></div>

＆＃13;

Answer 2

我不确定这是否能回答你的问题，但我认为css flex box正是你要找的。你不需要javascript来做这件事。

下面的代码会将你的div对齐在一行中，并使用弹性框提供响应（不是你正在寻找的确切布局，但我相信你能够弄清楚）

有关详细信息，请参阅此article

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            height: 200px;
            flex-grow: 1
        }

        .column {
            display: flex;
            flex-direction: column;
            flex-grow: 1
        }

        .big {
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column">
            <div class="big" style="background:#F00;">
                1
            </div>
        </div>
        <div class="column">
            <div class="big" style="background:#F0F;">
                2
            </div>
            <div class="big" style="background:#00F;">
                3
            </div>
        </div>
        <div class="column">
            <div class="big " style="background:#FF0; ">
                4
            </div>
            <div class="big" style="background:#55F;">
                5
            </div>
        </div>
    </div>
</body>

</html>

浮动div在Chrome和Edge中调整大小时出现故障

2 个答案:

问题：不可预知的浏览器舍入整数

解决方案：统一应用您自己的舍入整数