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

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

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

EDIT! Это конкретное значение может быть рассчитано с помощью 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);
});

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

Ответ 1

Похоже, что у вас все в порядке, но несколько заметок:

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

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

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

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

Ответ 2

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

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