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

Я хочу центрировать 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. Округлить цифру до ближайших 200 пикселей (ширина 160 пикселей + поля 2x20 пикселей)?
  4. Примените ширину к # list-wrap.

Вот кое-что, что я использовал раньше, что соответствует НЕКОТОРЫМ критериям для начала:

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

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

Нильс


javascript jquery css liquid-layout css-float
person Niels    schedule 24.01.2010    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вам не нужен 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, чтобы выровнять их по центру.

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

person Raspo    schedule 24.01.2010
comment
Извините, IE6 не поддерживает встроенный блок. Вы можете использовать плагин IE7.js (или IE8.js), чтобы IE6 правильно отображал эту информацию. вы можете найти его здесь: code.google.com/p/ie7-js - person Raspo; 24.01.2010
comment
Привет Распо, спасибо за отзыв. Я забыл упомянуть, что у меня есть 2 элемента внутри li, которые абсолютно позиционированы (один поверх другого). Я все еще заинтересован в решении jquery, но прибегаю к плагину IE8 и принимаю дополнительные накладные расходы библиотеки javascript :-) - person Niels; 25.01.2010

arrow_upward
0
arrow_downward

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

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

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

person robertc    schedule 24.01.2010
comment
Спасибо, Роберт, это было большим подспорьем! - person Niels; 25.01.2010

arrow_upward
0
arrow_downward

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

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

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

$('.selector').width( width );
person Rowno    schedule 24.01.2010

arrow_upward
0
arrow_downward

Решение 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

person Raspo    schedule 26.01.2010