Коллеги, помогите придумать, как реализовать следующее. Есть область (контейнер) на странице, в которой размещаются N блоков фиксированной ширины и высоты. Если делать их float: left, то они, ясен пень, строятся "табличкой" под левый край в количестве "сколько влезет на строку". А как их равномерно распределить по "резиновому" контейнеру? Думаю решение возможно на js, то есть узнать ширину браузера, разделить на ширину блока и выставить отступы. Помогите это реализовать!
А если, сделать резиновую таблицу, а в ячейки забабахать дивы с фиксированными размерами. По теории, при изменении размеров таблицы, будет только расстояние между дивами изменяться .
Код (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> Нашёл на одном форуме Но сдесь лишнее распределяется в блоки Как бы переделать этот код чтобы распределение шло между блоками??
Скрипт доработал В html всё работает безупречно но когда его переношу в блочную вёрстку по joomla в файл index.php он перестаёт распределять свободное пространство между блоками Если кто знает в чём может быть проблема подскажите? Спасибо!
