Как равномерно распределить блоки по "резиновому" контейнеру?

list · 01.01.2012

Коллеги, помогите придумать, как реализовать следующее. Есть область (контейнер) на странице, в которой размещаются N блоков фиксированной ширины и высоты. Если делать их float: left, то они, ясен пень, строятся "табличкой" под левый край в количестве "сколько влезет на строку". А как их равномерно распределить по "резиновому" контейнеру?
Думаю решение возможно на js, то есть узнать ширину браузера, разделить на ширину блока и выставить отступы.
Помогите это реализовать!

Наши спонсоры

fanatikus · 01.01.2012

А если, сделать резиновую таблицу, а в ячейки забабахать дивы с фиксированными размерами.
По теории, при изменении размеров таблицы, будет только расстояние между дивами изменяться .

OlegK · 01.01.2012

а выставить margin-left and padding-left с процентным значением.

list · 02.01.2012

Код (html):

<html>

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($)

{

function r()

{

var w = $('#all').width();

var kol = Math.floor(w/200);

var m = Math.floor((w - kol * 200) / kol);

$('div.allblock').each(function(index, domEle)

{

$(domEle).width( 200 + m);

}

);

}

r();

$(window).resize(function() { r(); } );

})(jQuery);

</script>

</head>

<body>

<div style="width: 100%;" id="all">

<div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>

<div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>

<div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>

<div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>

<div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>

<div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>

</div>

</body>

</html>

Нашёл на одном форуме Но сдесь лишнее распределяется в блоки Как бы переделать этот код чтобы распределение шло между блоками??

list · 11.01.2012

Скрипт доработал В html всё работает безупречно но когда его переношу в блочную вёрстку по joomla в файл index.php он перестаёт распределять свободное пространство между блоками Если кто знает в чём может быть проблема подскажите? Спасибо!

Войти или зарегистрироваться

Как равномерно распределить блоки по "резиновому" контейнеру?

list Недавно здесь

Наши спонсоры

fanatikus Недавно здесь

OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

list Недавно здесь

list Недавно здесь

Поделиться этой страницей

Войти или зарегистрироваться

Как равномерно распределить блоки по "резиновому" контейнеру?

list Недавно здесь

Наши спонсоры

fanatikus Недавно здесь

OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

list Недавно здесь

list Недавно здесь

Поделиться этой страницей

Быстрый поиск