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

**Fktrctq** · 01.01.2012 21:59

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

**knuckr** · 02.01.2012 14:50

блокам ведь можно ширину давать и не фиксированную, дать ширину 20% влезет 5 блоков, а с яваскриптом могу подсказать только на jQuery

**amaya** · 02.01.2012 15:13

Плюс можно указать максимальную и минимальную ширину и для контейнера и для блоков.

**Fktrctq** · 02.01.2012 16:00

Сообщение от knuckr

блокам ведь можно ширину давать и не фиксированну

в том то и проблема что нужно чтобы блоки были фиксированными

---------- Сообщение добавлено 15:00 ---------- Предыдущее 14:53 ----------

Код 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>

В этом примере свободное пространство распределяется в сами блоки и они растягиваются Какбы переделать чтобы свободное пространство распределялось между блоками

**knuckr** · 02.01.2012 19:34

если я правильно понял

1. блокам задать margin: auto; может будит то что надо
или
2. вместо $(domEle).width( 200 + m); - $(domEle).css("margin-right", m+"px");

**Fktrctq** · 02.01.2012 20:27

Сообщение от knuckr

1. блокам задать margin: auto; может будит то что надо или 2. вместо $(domEle).width( 200 + m); - $(domEle).css("margin-right", m+"px");

Сработало со вторым пунктом Большое спасибо!
knuckr а вы бы не могли разяснить что есть что в вашем варианте $(domEle).css("margin-right", m+"px") ?

**knuckr** · 04.01.2012 03:27

Код:

$(domEle).width( 200 + m); // тут мы прибавляем к ширине размером 200 определенное число, в итоге тянется блок
$(domEle).css("margin-right", m+"px"); // тут мы устанавливаем правый отступ в размере определенного вычисленного числа, таким образом увеличивается отступ справа а не сам блок

**Fktrctq** · 04.01.2012 10:19

Ещё раз спасибо за вашу помощь! Можно ещё пару вопросиков!?
Сейчас получается что свободное пространство делится на количество колонок в строке и присваевается к каждому блоку с права А можно сделать таким образом чтобы свободное пространство распределялось с права кроме последнего блока в строке ?

Или (Пример допустим в строке умещается 5 блоков по вашей формуле вычесляется 5 отступов и они распределяются с права) сумировать отступы разделить на количество ( сумированных отступов + ещё 1) и распределить свободное пространство справа у каждого блока и у первого блока с лева?

Или такой вариант "предпочтительней"
свободное пространство разделить на (количество блоков в строке умноженное на 2) и распределить отступы с права и слева у каждого блока
Спасибо!

**knuckr** · 04.01.2012 18:01

Сообщение от Fktrctq

Или такой вариант "предпочтительней"
свободное пространство разделить на (количество блоков в строке умноженное на 2) и распределить отступы с права и слева у каждого блока
Спасибо!

m2 = m/2;
$(domEle).css("margin", " 0px "+m2+"px");

Попробуйте так

**Fktrctq** · 05.01.2012 09:01

knuckr,Большое спасибо за помощь! Всё получилось!
подскажите пожалуйста как сделать чтобы между блоками минимальное растояние было 10рх?

	01.01.2012 21:59 #1
Fktrctq Опытный Регистрация: 21.12.2011 Сообщений: 457 Репутация: 11	Коллеги, помогите придумать, как реализовать следующее. Есть область (контейнер) на странице, в которой размещаются N блоков фиксированной ширины и высоты. Если делать их float: left, то они, ясен пень, строятся "табличкой" под левый край в количестве "сколько влезет на строку". А как их равномерно распределить по "резиновому" контейнеру? Думаю решение возможно на js, то есть узнать ширину браузера, разделить на ширину блока и выставить отступы. Помогите это реализовать!
0 Fktrctq

	02.01.2012 14:50 #2
knuckr Студент Регистрация: 13.04.2011 Сообщений: 46 Репутация: 15	блокам ведь можно ширину давать и не фиксированную, дать ширину 20% влезет 5 блоков, а с яваскриптом могу подсказать только на jQuery
0 knuckr

	02.01.2012 15:13 #3
amaya Опытный Регистрация: 23.01.2011 Сообщений: 336 Записей в дневнике: 1 Репутация: 43	Плюс можно указать максимальную и минимальную ширину и для контейнера и для блоков.
0 amaya

	02.01.2012 16:00 #4
Fktrctq Опытный Регистрация: 21.12.2011 Сообщений: 457 Репутация: 11	Сообщение от knuckr блокам ведь можно ширину давать и не фиксированну в том то и проблема что нужно чтобы блоки были фиксированными ---------- Сообщение добавлено 15:00 ---------- Предыдущее 14:53 ---------- Код 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> В этом примере свободное пространство распределяется в сами блоки и они растягиваются Какбы переделать чтобы свободное пространство распределялось между блоками
0 Fktrctq

	02.01.2012 20:27 #6
Fktrctq Опытный Регистрация: 21.12.2011 Сообщений: 457 Репутация: 11	Сообщение от knuckr 1. блокам задать margin: auto; может будит то что надо или 2. вместо $(domEle).width( 200 + m); - $(domEle).css("margin-right", m+"px"); Сработало со вторым пунктом Большое спасибо! knuckr а вы бы не могли разяснить что есть что в вашем варианте $(domEle).css("margin-right", m+"px") ? Последний раз редактировалось Fktrctq; 02.01.2012 в 20:37.
0 Fktrctq

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

Опции темы

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

"Сателлиты" \ "СДЛ" \ "Под Ключ" \ "Цена = Качество"

Как сделать валидный такой код span hashString="" hashType="" в XHTML

Вопрос для Украинцев: Можно ли вывести WMU на "кредитку" от "ПриватБанк'а" ?

У "Однокласников" появились "кошельки" для оплаты услуг

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	04.01.2012 10:19 #8
Fktrctq Опытный Регистрация: 21.12.2011 Сообщений: 457 Репутация: 11	Ещё раз спасибо за вашу помощь! Можно ещё пару вопросиков!? Сейчас получается что свободное пространство делится на количество колонок в строке и присваевается к каждому блоку с права А можно сделать таким образом чтобы свободное пространство распределялось с права кроме последнего блока в строке ? Или (Пример допустим в строке умещается 5 блоков по вашей формуле вычесляется 5 отступов и они распределяются с права) сумировать отступы разделить на количество ( сумированных отступов + ещё 1) и распределить свободное пространство справа у каждого блока и у первого блока с лева? Или такой вариант "предпочтительней" свободное пространство разделить на (количество блоков в строке умноженное на 2) и распределить отступы с права и слева у каждого блока Спасибо!
0 Fktrctq

	05.01.2012 09:01 #10
Fktrctq Опытный Регистрация: 21.12.2011 Сообщений: 457 Репутация: 11	knuckr,Большое спасибо за помощь! Всё получилось! подскажите пожалуйста как сделать чтобы между блоками минимальное растояние было 10рх?
0 Fktrctq

Темы	Раздел	Ответов	Последний пост
"Сателлиты" \ "СДЛ" \ "Под Ключ" \ "Цена = Качество"	Создание сайтов	22	22.01.2013 02:36
Как сделать валидный такой код span hashString="" hashType="" в XHTML	Web программирование	2	20.11.2011 18:21
Вопрос для Украинцев: Можно ли вывести WMU на "кредитку" от "ПриватБанк'а" ?	Прочее	23	18.11.2011 18:10
У "Однокласников" появились "кошельки" для оплаты услуг	Прочее	1	12.10.2010 09:49