Найдите ширину левого плавающего списка и примените к обертке div, чтобы центрировать его с помощью css - jQuery?

Question

Я хочу центрировать ul в div, который является левой колонкой жидкой компоновки. Для этого мне нужно установить ширину div, которую я использовал для обертывания ul. Примечание. Элементы списка (и содержимое) извлекаются из базы данных с использованием php.

Меня интересуют ваши предложения о том, как это сделать, используя jquery.

Рассмотрим следующий код:

<div id="wrapper"> 

    <div id="left-column"> 
    <div id="list-wrap"> 
     <ul> 
     <li>Dynamic content 1</li> 
     <li>Dynamic content 2</li> 
     <li>Dynamic content 3</li> 
     <li>Dynamic content 4</li> 
     </ul> 
     </div><!--/list-wrap--> 
    </div><!--/left-column--> 

    <div id="right-column"> 
    Content 
    </div><!--/right-column--> 

    <div style="clear: both;"></div> 

    </div><!--/wrapper--> 

Используя этот CSS:

#wrapper {} 
#left-column { float: left; width: 50%; } 
#right-column { float: right; width: 50%; } 
#list-wrap { margin: 0 auto 0 auto; padding: 40px; } 
#list-wrap ul { list-style-type: none; } 
#list-wrap ul li { float: left: width 160px; height: 160px; margin: 20px; } 

Я не слишком умен, когда дело доходит до Javascript, но я имею в виду решение повлекло бы за собой что-то вроде этого :

1. Найдите ширину области содержимого для использования в # левом столбце.
2. Определите, сколько лилей будет вписываться в эту ширину (с учетом поля и заполнения # list-wrap).
3. Завершите рисунок до ближайшего 200px (ширина 160px + поля 2x20px)?
4. Примените ширину к # list-wrap.

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

var menuWidth = 0; 
    $(".menu > ul > li > a").each(function(i) { 
    menuWidth += $(this).outerWidth(true); 
    }); 
    $(".menu").css("width", menuWidth); 

Заранее спасибо за вашу помощь,

Niels

Answer 1

Вам не нужно JS, чтобы сделать работу CSS!

считают этот стиль:

#wrapper {} 
#left-column { float: left; width: 50%; } 
#right-column { float: right; width: 50%; } 
#list-wrap { margin: 0 auto 0 auto; padding: 40px; } 
#list-wrap ul { list-style-type: none; text-align: center; } 
#list-wrap ul li { width: 160px; height: 160px; margin: 20px; display: inline-block; } 

Избавьтесь от float: left; для li элементов и добавить display: inline-block;

Наконец, добавьте text-align: center; к UL, чтобы сделать их центром

Я надеюсь, что это что вы искали.

Answer 2

В jQuery width function возвращается в полезной области уже. При том, что я думаю, что вы пытаетесь сделать, это довольно просто:

var ulWidth = $("#list-wrap ul li").width(); 
$("#list-wrap").width(Math.floor(($("#left-column").width() - 80)/ulWidth) * ulWidth); 

Если вы хотите, чтобы быть универсальным и рассчитать соответствующие отступы и границы тоже смотрят на вопрос «Total width of element (including padding and border) in jQuery».

Answer 3

Чтобы получить ширину любого использования элемента:

var width = $('.selector').width(); 

Чтобы установить ширину любого использования элемента:

$('.selector').width(width); 

Answer 4

Jquery решение:

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

$(function() { 
    var availableWidth = $("#list-wrap").width(); 
    var liWidth = $("#list-wrap ul li").outerWidth(true); 
    var numberOfListItem = parseInt(availableWidth/liWidth); 
    var newWidth = numberOfListItem*liWidth; 
    $("#list-wrap").width(newWidth); 
}); 

примечание: в CSS добавить поле: 0 ; заполнение: 0; к уль

вы можете увидеть его здесь: http://jsbin.com/uxaho/3/edit