"Резиновые отступы" проблема с реализацией

[Верстальщикус]

Здравствуйте.

Я не первый день занимаюсь версткой, но опыта работы с резиной у меня совсем мало.

Работодатель настаивал, чтобы я научился верстать резину и скинул мне макет. В процессе работы возникла задача, которая ставит меня в тупик.

В блоке с контентом есть 4 блока, пусть это будут баннеры, которым заданы определенные ширина и высота – по мере растяжения окна браузера должны растягиваться отступы между баннерами, а у самих баннеров ширина должна оставаться неизменной. Для наглядности прошу взглянуть на изображение:

У меня получилось реализовать нечто приближенное с помощью таблиц (предпочитаю блочную верстку, но здесь главное, чтобы работало...):

Вставил таблицу, задал ей ширину 100%, использовал 4 ячейки и в них добавил блок div с нужной шириной.

Все супер, только вот естественно справа образуется не нужный отступ (если блок div отцентрировать относительно ячейки, то отступы будут слева и справа - а все должно быть впритык по краям), изображение для наглядности:

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

Спасибо за внимание. Очень надеюсь на вашу помощь... Буду благодарен за любую подсказку по этому вопросу…

Edited June 14, 2011 by Верстальщикус

[moskalev_mihail]

А если попробовать позиционированием? Можно задать процентами расположение каждого баннера от краев и тогда при расширении окна браузера будет меняться расположение баннеров.

[mishka]

Можешь в аську стукнуть - скину пример, ты потом сделаешь свой, и тут выложишь код, без картинок, просто для примера.

[Верстальщикус]

А если попробовать позиционированием? Можно задать процентами расположение каждого баннера от краев и тогда при расширении окна браузера будет меняться расположение баннеров.

Попробовал, сначала обрадовался, т.к. при максимальной ширине все было хорошо, и отступы резинились при уменьшении экрана. Но на подступе к минимальной ширине появляется горизонтальная полоса прокрутки, но не в этом беда - последний блок урезается на одну треть.

Можешь в аську стукнуть - скину пример, ты потом сделаешь свой, и тут выложишь код, без картинок, просто для примера.

С радостью, уже стучу.

[Верстальщикус]

Можешь в аську стукнуть - скину пример, ты потом сделаешь свой, и тут выложишь код, без картинок, просто для примера.

Решение суперское - все работает отлично, причем блокам можно задавать разную ширину.

Как я понимаю все работает на основе display:inline-block; и text-align:justify, который выравнивает inline элементы.

Вот, что сделано на основе предоставленного мне примера:

<div class="banners">
	<div class="banner"></div>
	<div class="banner"></div>
	<div class="banner"></div>
	<div class="banner"></div>
	<span class="banners-w"></span>
</div>

.banners {
	height: 94px;
	text-align: justify;
	text-justify: newspaper;
	font-size: 0;
	line-height: 0;
}
.banner {
	display: inline-block;
	vertical-align: top;
	width: 232px;
	height: 94px;
	background:#000;
	color:#fff;
}
.banners-w {
	width: 100%;
	display: inline-block;
}
html* .banner,
html* .banners-w {
	display: inline;
	zoom: 1;
}

Если вдруг будут еще примеры решения задачи, даже с теми же таблицами - буду благодарен, возможно не только я - так сказать для общего развития.

Спасибо пользователю, mishka

Edited June 14, 2011 by Верстальщикус

[Softlink]

я немного не понял почему у вас не получилось все сделать таблицами и откуда отступ взялся.

Ради интереса попробовал повторить тоже самое и вроде бы все работает. Пример с пустыми ячейками можно здесь посмотреть. С картинками вот здесь.

[Верстальщикус]

я немного не понял почему у вас не получилось все сделать таблицами и откуда отступ взялся.

Ради интереса попробовал повторить тоже самое и вроде бы все работает. Пример с пустыми ячейками можно здесь посмотреть. С картинками вот здесь.

С отступом была другая ситуация, было 4 ячейки и 4 блока в них, выравнивание блока по левому краю - у последней ячейки остается пространство справа.

А вот, когда я пытался сделать как в вашем примере - 4 ячейки для блоков и 3 для отступов между ними - я сильно протупил - бревно я в табличной верстке - указал ширину ячеек-отступов в процентах - посему происходило то, что можно увидеть в третьем изображении - тянулись ячеки-блоки, у которых казалось бы была фиксированная ширина. В вашем примере для ячеек-отступов просто не нужно указывать ширину и тогда все работает как надо...

Softlink, большое вам спасибо! Как раз возникла ситуация, когда нужно добиться обратного эффекта - т.е. чтобы тянулись блоки, а отступы оставались неизменными. Вы мне очень помогли.

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

http://agat.in/samples/grid-sample/ - попробую реализовать по примеру, если что-то не получится - таблицы рулят (конечно же исходя из ситуации удобнее сие реализовать табицами, но упертых заказчиков никто не отменял)

Edited June 15, 2011 by Верстальщикус