Найдите ширину левого плавающего списка и примените к 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. Определите, сколько li будет вписываться в эту ширину (с учетом поля и отступа # 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:

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

$(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

Answer 3

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

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

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

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

Answer 4

Функция jQuery width уже возвращает используемую область. С этим, я думаю, вы пытаетесь сделать это довольно просто:

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

Если вы хотите быть универсальным и рассчитать соответствующие отступы и границы, см. Вопрос " Общая ширина элемента (включая отступы и границы) в jQuery ."