Рассчитать общую ширину дочерних элементов с помощью jQuery

Я пытался найти понятный ответ на этот вопрос, но сдался.

Чтобы иметь динамический контент (например, сообщения в блогах и изображения) на горизонтальном веб-сайте (например, на thehorizontalway.com), вы должны установить фиксированную ширину для ТЕЛА в пикселях, верно? Поскольку вы используете плавающие элементы внутри, которые в противном случае разорвали бы и завернули страницу, в зависимости от ширины браузера.

ИЗМЕНИТЬ! Это конкретное значение можно вычислить с помощью jQuery, спасибо за это :) В этом примере к общему размеру добавляется дополнительное значение , который можно использовать для содержимого перед плавающими элементами. Теперь тело получает динамическую ширину!

Моя первоначальная мысль заключалась в том, чтобы jQuery вычислил это для нас: ( 'КАЖДАЯ ШИРИНА СООБЩЕНИЙ' * 'КОЛИЧЕСТВО СООБЩЕНИЙ') + 250 (для дополнительного контента)

HTML-код

<body style="width: ;"> <!-- Here we want a DYNAMIC value -->
<div id="container">
    <div id="menu"></div> <!-- Example of extra content before the floats -->
    <div class="post">Lorem</div>
    <div class="post">Lorem</div>
    <div class="post">Lorem</div> <!-- Floated elements that we want the sizes of -->
    <div class="post">Lorem</div>
</div>
...
<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be ( 300+300+300+500 ) + 250 [#menu] = 1650px -->

Результат и ответ от Alconja

$(document).ready(function() {
var width = 0;
$('.post').each(function() {
    width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});

Большое спасибо!


dynamic layout jquery css
person elundmark    schedule 18.06.2009    source источник

Ответы (2)


arrow_upward
37
arrow_downward

Похоже, вы все правильно поняли... хотя пара замечаний:

  • .outerWidth(true) включает отступы и поля (поскольку вы передаете true), поэтому нет необходимости пытаться добавить это снова.
  • .outerWidth(...) возвращает только ширину первого элемента, поэтому, если каждый элемент имеет разный размер, умножение его на количество сообщений не будет точным значением общей ширины.

Имея это в виду, что-то вроде этого должно дать вам то, что вам нужно (сохранение начального заполнения 250, которое, как я полагаю, предназначено для меню и прочего?):

var width = 0;
$('.post').each(function() {
    width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);

Помогает ли это или есть какая-то другая конкретная проблема, с которой вы столкнулись (не совсем понятно из вашего вопроса)?

person Alconja    schedule 18.06.2009
comment
Круто, я как раз это и имел в виду. Я отредактирую вопрос позже, чтобы было понятнее, о чем я говорил. Как вы сказали, код, который у меня был, взял только первый .post и вычислил остальные, умножив их на .size() - это значительно упрощает создание страницы с горизонтальной прокруткой, делая ширину тела динамической для каждой страницы :) Просто нужно добавить некоторую ширину тела noscript, и все готово. - person elundmark; 19.06.2009

arrow_upward
0
arrow_downward

Вы можете рассчитать ширину с помощью этого однострочника, хотя он немного длиннее, чем мне бы хотелось.

var width = $('.post').map(function(undefined, elem) {
    return $(elem).outerWidth(true);
}).toArray().reduce(function(prev, curr) {
    return prev + curr;
}, 0);
person smac89    schedule 17.06.2016