Пропорциональное выравнивание блоков по горизонтале

[Партия ЦКCSS]

Привет, экспериментирую и гуглю часа 4е... ничего подобного найти не удалось, в общем:

Необходимо выравнить произвольное (и заранее не известное) кол-во блоков (то есть блочных элементов со всеми признаками блочности, включая возожность иметь потомков различного типа, включая блочных) по горизонтали, внутри родительского блока, и с учётом пропорционального центрирования.

например, имеется 4е сестринских блока, располагающихся внутри контейнера по всей его ширене, занимающие всё его клиентское пространство пропорционально (так сказать по центру), и имеющие одинаковые отступы друг от друга, изменяющиеся (уменьшающиеся/увеличивающиеся) в зависимости от количества сестринских БЛОЧНЫХ элементов, то есть, сестринские блоки должны быть пропорционально выравнены по центру, равномерно занимая всё доступное пространство своего контейнера.

Попробую продемонстрировать это наглядно скрином:

Здесь, #container - один и тот же родительский блок в трёх разных случаях -

1. - когда дочерних элементов 4е

2. - когда их собственно 5

3. и когда их только три штуки

то есть, #container - это один и тот же блок, умеющий "хостить" в себе любое количество элементов (вопрос соотв. ширины и оверфлоу здесь не суть важно, просто представим, что сумма ширин дочерних никогда не больше ширины клиентской области контейнера), и пропорционально центрировать.

Собственно это всё, подскажите как реализуется подобное.

[Zippovich]

думаю что без js такого не сделаешь

хотя можно попробовать промежуточный слой сделать между контейнером и внутренним блоком, у него будет width в процентах, например при 3-х блоках width: 33%, а внутренние блоки выравняй посередине промежуточных по горизонтали.

<div id="container">
  <div class="col3">
	<div class="inner-block"></div>
  </div>
  <div class="col3">
	<div class="inner-block"></div>
  </div>
  <div class="col3">
	<div class="inner-block"></div>
  </div>
</div>

#container {position: relative}
.col3 {width: 33%; display: inline-block; float: left}
.inner-block {width: 100px; border: 1px solid brown; margin: 0 auto}

Edited July 21, 2009 by Zippovich

[rus]

Автор, чего курил? Поделишься?

[Justnewone]

Боюсь, только считать на JS и назначать маргины.

[Партия ЦКCSS]

угу, пасибо всем, по крайней мере подтвердили мои соображения по этому поводу

в оригинале юзается не JS, а при шаблонизации, ПЫХ-скриптик вставляет маргины, пожалуй так и оставлю.

зы: не отсыплю

[Игорь Ермаков]

Ник жгёт.

[rus]

зы: не отсыплю

Жадина...

[Searcher]

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

[Justnewone]

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

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

[Searcher]

в ослах всегда проблемы, даже в простых задачах ((