Question

我已使用此脚本获取宽度，然后将其应用于同一元素：

OnPropertyChanged("Forename")

然而，出于某种原因，有些元素有时候不会得到匹配的宽度和高度。正如你在这个小提琴中看到的那样：https://jsfiddle.net/cpfgtuzo/5/最后一个元素具有正确的尺寸，但其余元素都高于它们的宽度。我试图让它们成为正方形，我也需要支持旧的浏览器。

当窗口的大小较小且四个项目堆叠成2列时，这似乎只是一个问题。

Answer 1

在您对其他答案发表评论后，

我在页面上有很多使用此脚本的元素，而且并非所有元素的大小都相同（也有较小的方块组）

和

但是生成的盒子没有出现。如果你检查你的小提琴，盒子是〜10px太高

此解决方案似乎可以克服这些问题，如果有帮助，请告诉我Working Fiddle

$(document).ready(function () {
    $(".equal-height").each(function () {
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height": slideSize + "px", "width": slideSize + "px" }); 
        //setting the width along with height
    });                
});

Answer 2

嗯，我认为在计算每个元素的宽度时，jQuery存在一个错误。

将this jsfiddle作为解决方法。

// Height = Width
$(document).ready(function() {
  var width = $('.wide-content').width();
  // prevent jQuery from calculating the width of children
  $('.wide-content').hide();
  // $(".equal-height").width() is now 50
  var slideSize = $(".equal-height").width() * width / 100;

  $(".equal-height").each(function() {
    $(this).css({
      "height": slideSize + "px"
    });
  });
  $('.wide-content').show();
});

Answer 3

所有元素的相同高度

我只是使用第一个框来计算其他元素的高度 - 至少这将确保相同的高度。它也会摆脱那个循环..

$(".equal-height").css({"height" : $(".equal-height").eq(0).outerWidth()});

一行来统治他们

但是，因为这不符合范围..

制作不同大小元素的正方形

经过一番搞砸后，只有在你开始篡改高度后，宽度才会被错误地返回。这可以通过注释掉设置高度和观察输出的css命令来轻松测试。

解决方案似乎是设置预定义的高度：

.link-quarters {            
    width: 25%;
    height: 100px;
    float: left;
    ...

这将在所有元素（重要部分）上返回完全相同的宽度，然后您可以在没有问题的情况下以编程方式设置相应的高度。

但是仍然存在舍入问题，因为百分比宽度可能会导致十进制数字被浏览器（或js）四舍五入。

https://jsfiddle.net/cpfgtuzo/17/

JQuery没有得到正确的宽度

3 个答案: