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

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

javascript jquery css html

Javascript 浮动divs在Chrome和Edge中调整大小时出现故障,javascript,jquery,css,html,Javascript,Jquery,Css,Html,有人知道如何解决这个问题吗。唯一能正常工作的浏览器是Firefox；在Chrome和Edge中，它不起作用。当我调整屏幕大小时，框会改变位置。有什么解决办法吗截图 HTML JavaScript $(window).resize(resize) function resize() { $(".box").each(function() { $(this).height( $(this).width() * 0.5) }); } 以下是代码笔链接：更新---------

有人知道如何解决这个问题吗。唯一能正常工作的浏览器是Firefox；在Chrome和Edge中，它不起作用。当我调整屏幕大小时，框会改变位置。有什么解决办法吗

截图

HTML

JavaScript

$(window).resize(resize)

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

以下是代码笔链接：

更新---------

我修改了代码笔以显示更复杂的结构。问题是，当您调整屏幕浏览器的大小时，div不符合正确的位置，一些div跳转到下一行

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

我不确定这是否能回答您的问题，但我认为css flex box是您需要的。这样做不需要javascript

下面的代码将在一行中对齐您的div，并使用flex-box提供响应能力（不是您正在查看的确切布局，但我相信您将能够找到它）

欲了解更多信息，请参阅此


.集装箱{
显示器：flex；
弯曲方向：行；
高度：200px；
弹性增长：1
}
.栏目{
显示器：flex；
弯曲方向：立柱；
弹性增长：1
}
.大{
柔性生长：1；
}
1.
2.
3.
4.
5.

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

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

function resize（）{
$（“.box”）。每个（函数（）{
var height=$（this）.width（）*0.5；
$（本）
.高度（高度）
.html（“height:+$（this）.height（）+”px（从“+height+”四舍五入）”；
});
}
$（窗口）。调整大小（调整大小）；
调整大小（）
.box{float:left；}
.大盒子{
宽度：50%；
高度：200px；
}
.小盒子{
宽度：25%；
高度：100px；
}

对我来说，它与Safari配合很好。与Chrome一样，继续并将其扔掉。我的chromeA cleaner版本的问题（更容易看到发生了什么）不太好，这里是：嗨，JSFIDLE显示了同样的问题。。。。慢慢调整浏览器窗口的大小时。boxs网格在某些尺寸下无法正常工作。。。我认为这是因为Chrome不能处理十进制值。。。。。。一些不使用砌体的解决方案。js有人能解释一下否决票吗？如果你能评论一下为什么，那么它将帮助我改进答案？？也许是因为你的代码产生了这样的结果：？@ChuckLeButt谢谢。我确实提到了答案可能不是OP想要的确切布局，通过阅读这篇文章来即兴创作是相当简单的。无论如何，我已经用精确布局更新了我的答案。你的解决方案仍然不能满足OP的要求（甚至不能接近）。你可以在没有FlexBox（或js）的情况下复制你所制作的东西，所以你不清楚他们在这种情况下会有什么帮助——我真的不认为他们会。说“读这篇文章”也不是一个好答案。这样的事情在这里是非常令人沮丧的。谢谢你。。。我将继续使用jquery.packery.js，直到Chrome和Edge解决了这个问题，，，，在Firefox上工作得很好….：(
.box {
  width: 50%;
  height: 100px;
  float: left
}

$(window).resize(resize)

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

<!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>