Ширина jQuery не включает заполнение внутренних элементов

Question

Ширина jQuery не включает заполнение внутренних элементов

0

Когда элемент содержит встроенные блоки, которые содержат заполнение, он не включается в вычисления ширины элемента.

По существу та же проблема, что и jQuery outerWidth для родительского элемента, который имеет дочерние элементы с дополнением.

Эта страница должна иметь текст, который выравнивается вдоль правой стороны зеленого окна, однако текст всегда будет больше, чем контейнер, потому что ширина никогда не включает в себя заполнение любого из них.

Есть ли способ правильно найти ширину элемента без ручного перечисления всех дочерних элементов и повторного добавления прокладок каждого ребенка? Те же результаты при использовании .css('width'), .width() или .outerWidth().

<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      var e = jQuery('#BLAH');
      var pw = e.parent().width();
      e.css('font-size','1px');
      if (e.outerWidth() < pw) {
        while ( e.outerWidth() < pw) {
          alert('width ' + e.outerWidth() + ' < ' + pw);
          e.css('font-size','+=1px');
        }
        e.css('font-size','-=1px');
      }
    });
  </script>
  <style>
    #BLAH {
      background-color: red;
      white-space: nowrap;
    }
    .BLAH {
      //padding: 0 10%;
      background-color: blue;
      display: inline;
    }
  </style>
</head>
<body>
    <div style="background-color: green; width: 50%; height: 50%">
      <div id="BLAH" style="display: inline-block;">
        <div class="BLAH">BLAH</div>
        <div class="BLAH">BLAH</div>
        <div class="BLAH">BLAH</div>
        <div class="BLAH">BLAH</div>
      </div>
    </div>
</body>
</html>

user3338098 13 март 2014, в 22:49

Источник

0

Посмотрите box-sizing:border-box
kei 13 март 2014, в 21:36
0

Кажется, проблема связана с заполнением в процентах. Я предполагаю, что проблема заключается в том, что, если бы процентное заполнение было учтено, это был бы бесконечный цикл, чтобы попытаться вычислить ширину. Заполнение влияет на ширину, но ширина влияет на заполнение.
James Montagne 13 март 2014, в 21:43
0

не бесконечный цикл: parentWidth = totalChildFixedWidths / (1-totalChildPercentPadding), но вместо того, чтобы делать то, что очевидно, W3C решил объявить, что здравый смысл на самом деле неопределенное поведение ...
user3338098 14 март 2014, в 21:20

Показать ещё 1 комментарий

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Кажется, проблема связана с заполнением в процентах. Я предполагаю, что проблема заключается в том, что, если бы процентное заполнение было учтено, это был бы бесконечный цикл, чтобы попытаться вычислить ширину. Заполнение влияет на ширину, но ширина влияет на заполнение.
не бесконечный цикл: parentWidth = totalChildFixedWidths / (1-totalChildPercentPadding), но вместо того, чтобы делать то, что очевидно, W3C решил объявить, что здравый смысл на самом деле неопределенное поведение ...

James Montagne · Accepted Answer · 2014-03-14T12-21-00.000Z

Поскольку проблема возникает только с заполнением в процентах, вы можете вместо этого использовать фиксированное заполнение пикселей и увеличивать его вместе с вашим размером шрифта в javascript. Что-то вроде этого:

jQuery(document).ready(function () {
    var e = jQuery('#BLAH');
    var pw = e.parent().width();
    e.css('font-size', '1px');
    if (e.outerWidth() < pw) {
        while (e.outerWidth() < pw) {
            console.log('width ' + e.outerWidth() + ' < ' + pw);
            e.css('font-size', '+=1px');

            jQuery(".BLAH").css({
                'padding-right': '+=1px',
                'padding-left': '+=1px'
            });
        }

        e.css('font-size', '-=1px');

        jQuery(".BLAH").css({
            'padding-right': '-=1px',
            'padding-left': '-=1px'
        });
    }
});

http://jsfiddle.net/5Gufk/

Если вы хотите усложнить его, вы можете рассчитать отступ в процентах от предыдущей ширины родительского элемента и применить это, а не просто увеличивать на одну или любую другую формулу.

Что касается того, почему он работает таким образом, мне не удалось найти часть спецификации CSS, которая определяет это поведение. Однако важно понимать, что процентное заполнение основано на ширине содержащего блока. Подумайте, как это будет работать, если у вас есть 6 элементов, все с 10% дополнением с обеих сторон. Это будет 120% отступов, как может быть возможно, что заполнение элементов должно составлять 120% от ширины родительского элемента и по-прежнему помещаться внутри родительского элемента?

w3.org/TR/CSS2/box.html#padding-properties «Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1»
Как только я увидел первый комментарий о «бесконечном цикле», я вспомнил, что совершил эту ошибку еще в 2004 году, примерно в то время, когда начал учиться в колледже, и это был год, когда я отказался от html + css + javaScript. как шутка, в наши дни стало лучше, но, увы, это все еще нелепая шутка.