Как сделать блоки фикс. ширины занимающие всю ширину блока родителя?

[bob_24]

Имеется какой-то внешний блок и в нем n вложенных блоков. Ширина внутренних блоков не должна меняться. Они должны "разъезжаться" на всю ширину внешнего блока так, что бы расстояние между ними было одинаковым.

Пробовал задавать внутренним блокам display: inline-block, а внешнему text-align:justify, но это ничего не дало.

[fanatikus]

А внешний блок, фиксированной ширины, или резиновый?

text-align выравнивает текст внутри блока, а не сам блок.

[bob_24]

И резиновый и фиксированный, это не имеет значения.

Конечно внутри, но внутренние блоки же инлайновые стали. text-align:right у внешнего работает, а justify нет.

[fanatikus]

Если основной контейнер резиновый, то можно сделать так:

<div class="conteiner">
<div class="rezin"></div>
<div class="fiks"></div>
<div class="rezin" ></div>
<div class="fiks" ></div>
<div class="rezin"></div>
<div class="fiks"></div>
<div class="rezin"></div>
</div>

.conteiner {
width:100%;
height:100px;
}
.rezin{
width:22%;
height:100px;
float:left;
background-color:#FF0000;
}
.fiks{
width:38px;
height:100px;
float:left;
background-color:#00FF00;
}

Edited November 12, 2011 by Softlink
Обрамляйте код в спец. теги.

[bob_24]

Спасибо конечно, но я же писал, что "ширина внутренних блоков не должна меняться", какие 22%?

Edited November 12, 2011 by bob_24

[Softlink]

Может быть так попробовать?

[bob_24]

Так они не прилипают к краям контейнера...

Я смог сделать только с помощью таблицы.

http://jsfiddle.net/APpDd/15/

Но это, мягко говоря, корявое решение.

Edited November 12, 2011 by bob_24

[Softlink]

Так они не прилипают к краям контейнера...

Я смог сделать только с помощью таблицы.

http://jsfiddle.net/APpDd/15/

Но это, мягко говоря, корявое решение.

С таблицами точно будет железная верстка, но можно ведь не так сделать. Вместо всяких выравниваний, просто добавить ячеек. Или я опять не так понял?))

[bob_24]

Все так понял. Да, это более красивый вариант, на нем остановлюсь.

спасибо))

[Softlink]

Все так понял. Да, это более красивый вариант, на нем остановлюсь.

спасибо))

На здоровье. В принципе тоже самое можно и на блоках сделать, но ИЕ 6-7 за бортом окажутся.

[Lemming]

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

[fanatikus]

Спасибо конечно, но я же писал, что "ширина внутренних блоков не должна меняться", какие 22%?

Тогда может так:

<div class="conteiner">
<div class="rezin"></div>
<div class="rezin1"></div>
<div class="rezin" ></div>
<div class="rezin1"></div>
<div class="rezin"></div>
<div class="rezin1"></div>
div class="rezin"></div>
                </div>

.conteiner {
width:550px;
height:100px;
border:solid #000000 1px; 

}
.rezin{
width:100px;
height:100px;
float:left;
background-color:#FF0000;
}
.rezin1{
width:50px;
height:100px;
float:left;
background-color:ffffff;
}

Edited November 13, 2011 by fanatikus

[Softlink]

fanatikus,

1. выше я поправил ваш пост и написал, что надо использовать спец. теги для кода.

2. что будет, если ширина контейнера 100%?

[fanatikus]

fanatikus,

1. выше я поправил ваш пост и написал, что надо использовать спец. теги для кода.

2. что будет, если ширина контейнера 100%?

Извиняюсь. По первому пункту исправился.

Что касается второго, наверное я не правильно понял задачу.

Если, нужно чтобы в резиновом блоке, находилось несколько блоков с фиксированными размерами и с фиксированным расстоянием между ними, то такое, как мне кажется, невозможно.

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

[Softlink]

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

Именно так и было поставлено задание.

[alexpop]

Так они не прилипают к краям контейнера...

Я смог сделать только с помощью таблицы.

http://jsfiddle.net/APpDd/15/

Но это, мягко говоря, корявое решение.

О! так тут всего один шаг до "почти" нормальной верстки!

Типа так:

http://jsfiddle.net/alexpop/6adLm/5/

Хотя не идеально, доли процентов скачут койгде

Edited November 13, 2011 by alexpop