Вопрос по dynamic, jquery, css, layout – Рассчитайте общую ширину детей с помощью jQuery

17

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

Чтобы иметьdymnamic содержание (например, сообщения в блоге и изображения) вhorizontal website (как наthehorizontalway.comВы должны установить фиксированную ширину для тела в пикселях, верно?Because you use floated elements inside it that otherwise would break and wrap down the page, depending on the browsers width.

EDIT! Это конкретное значение может бытьcalculated сjQueryСпасибо за это :) В этом примере к общему размеру добавляется дополнительное значение, которое можно использовать для содержимого перед плавающими элементами. Теперь тело приобретает динамическую ширину!

Первоначально я думал, что jQuery рассчитает это для нас: («КАЖДАЯ ПОЗИЦИЯ» * «КОЛИЧЕСТВО ПОСТОВ») + 250 (для дополнительного содержимого)

HTML код

<code><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 -->
</code>

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

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

Спасибо!

Ваш Ответ

2   ответа
0

хотя и немного дольше, чем мне бы хотелось.

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

.outerWidth(true) includes the padding & margin (since you're passing true), so there's no need to try & add that in again. .outerWidth(...) only returns the width of the first element, so if each element is a different size, multiplying this by the number of posts won't be an accurate value of total width.

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

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

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

Круто, это было именно то, что я имел в виду. Я отредактирую вопрос позже, чтобы было более понятно, о чем я говорил. Как вы сказали, код, который я взял, только взял первый .post и вычислил остальное, умножив их на .size () - это значительно упрощает создание горизонтальной прокрутки страницы, делая ширину тела динамической на страницу: Просто нужно добавить noscript super-body-width, и все готово. elundmark
D: ЧТО !! ЭТО СУЩЕСТВУЕТ!?!?! Я воссоздал externalWidth () в течение нескольких месяцев !!!

Похожие вопросы