JQuery не получает правильную ширину

Question

Я использовал этот скрипт, чтобы получить ширину, а затем применить его к одному элементу:

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

     console.log(slideSize); 

     $(this).css({ "height" : slideSize + "px" }); 
    });     
}); 

Однако, по какой-то причине, есть элементы, которые иногда не получают соответствующая ширина и высота. Как вы можете видеть в этой скрипке: 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/