Как сделать 3 блока "одинаковой высоты"?

[E5000]

Есть вот такой код:

<div style="width: 108px; height: 100px;">

<div style="background-color:lime; width: 4px; height: inherit; float: left;">1</div>
<div style="background-color:lime; width: 4px; height: inherit; float: right;">2</div>
<div style="background-color:blue; width: 100px; margin-left: 4px; margin-right: 4px;">
	asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
</div>

</div>

хочется, чтобы блоки "1" и "2" занимали точно такую же высоту, какую занимает синий блок с "контентом".

Цель этого: контент, и по бокам нужны фоновые виньетки. Ширина контентового блока указывается явно, но блоков не один и ширина у них у всех - разная.

Edited June 26, 2011 by E5000

[ctpz]

На форуме поднимался этот вопрос.

Вот к чему пришли http://jsfiddle.net/RzC4q/ (обсуждение) Весит немного и просто в реализации.

Edited June 26, 2011 by ctpz

[E5000]

Ничего себе костыль

Тут табличная вёрстка видимо многократно уделывает блочную для динамических размеров.

Edited June 26, 2011 by E5000

[ctpz]

Нет, не уделывает.

Таблицы слишком громоздкие и не имеют никакой гибкости.

Сравнивать блочную и табличную верстку - все равно, что сравнивать вертолет и самолет.

Edited June 26, 2011 by ctpz

[E5000]

Но в чём же эта гибкость-то у блочной вёрстки проявляется? Удобство использования блоков с jQuery?) Размер кода при таблицах вроде и не сильно раздувается, прописывай только всё в CSS, да и перевес будет процентов на 10

[sigma77]

E5000,

Не нужны в вашем случае никакие js. 2 вложенных друг в друга блока. На один вешаете в бекграунде левые винетки, на другую правые.

[gart]

обычно для таких целей используют фон, четырехпикселевый лайм, в вашем случае, для блока <div style="width: 108px; height: 100px;">

[E5000]

E5000,

Не нужны в вашем случае никакие js. 2 вложенных друг в друга блока. На один вешаете в бекграунде левые винетки, на другую правые.

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

Это и зовётся гибкостью блочной вёрстки?

[gart]

E5000,

Не нужны в вашем случае никакие js. 2 вложенных друг в друга блока. На один вешаете в бекграунде левые винетки, на другую правые.

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

Это и зовётся гибкостью блочной вёрстки?

<div style="width: 108px; min-height: 100px;background-color:lime; ">

<div style="width: 4px; height: inherit; float: left;">1</div>
<div style="width: 4px; height: inherit; float: right;">2</div>
<div style="background-color:blue; width: 100px; margin-left: 4px; margin-right: 4px;">
        asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>asdf<br>
</div>

</div>

Edited June 27, 2011 by gart

[sigma77]

E5000,

Не нужны в вашем случае никакие js. 2 вложенных друг в друга блока. На один вешаете в бекграунде левые винетки, на другую правые.

Так вот это и не сработает... ширина блоков-то разной бывает.

А вы пробовали?

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

Да ладно? Где здесь куча картинок?

http://jsfiddle.net/rbfmr/

Это и зовётся гибкостью блочной вёрстки?

А вот тролить, если что-то не поняли не надо. Блочная верстка отличается принципом верстки от табличной. Вы же пытаетесь использовать блоки, как если бы верстали таблицей.

[Softlink]

sigma77, ваш пример хорош. Все работает. Но есть одно НО. Попробуйте поменять цвет блоку с контентом. Благо, если он будет белым, то все сработает. А если нет?

вот так например http://jsfiddle.net/rbfmr/1/

в общем, тут надо смотреть, что за виньетки и какой фон блока с контентом и родителя.

[sigma77]

sigma77, ваш пример хорош. Все работает. Но есть одно НО. Попробуйте поменять цвет блоку с контентом. Благо, если он будет белым, то все сработает. А если нет?

вот так например http://jsfiddle.net/rbfmr/1/

И? В чем претензия и какая задача?

[Softlink]

sigma77, ваш пример хорош. Все работает. Но есть одно НО. Попробуйте поменять цвет блоку с контентом. Благо, если он будет белым, то все сработает. А если нет?

вот так например http://jsfiddle.net/rbfmr/1/

И? В чем претензия и какая задача?

не претензия. Если сделать так, как у вас, то бордер из виньеток весь погрузится в цвет блока с контентом. А мне думается, что автор имеет ввиду немного не так. Чтобы виньетка именно разделяла блок. Т.е. по левую сторону будет красный цвет блока, а внутри синий.

[sigma77]

не претензия. Если сделать так, как у вас, то бордер из виньеток весь погрузится в цвет блока с контентом. А мне думается, что автор имеет ввиду немного не так. Чтобы виньетка именно разделяла блок. Т.е. по левую сторону будет красный цвет блока, а внутри синий.

Ну так обернуть сам контент в див и ему уже всё задавать. Я привела лишь принцип решения. Дальше уже пусть ТС действует исходя из своей задачи.

http://jsfiddle.net/rbfmr/3/

[Softlink]

Вы немного не поняли. Вот я что имел ввиду: .

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

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

[gart]

Вы немного не поняли. Вот я что имел ввиду: .

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

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

Ну, или отрицательный маржин, я обычно использую.

[Softlink]

Ну, или отрицательный маржин, я обычно использую.

тут маржин не поможет.

[psywalker]

Вы немного не поняли. Вот я что имел ввиду: .

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

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

Если можно, приведи пожалуйста решение. Просто хочу понять, о чём идёт речь.

[Softlink]

Если можно, приведи пожалуйста решение. Просто хочу понять, о чём идёт речь.

http://www.alpatriott.ru/works/primer/borderfon.html

[psywalker]

Если можно, приведи пожалуйста решение. Просто хочу понять, о чём идёт речь.

http://www.alpatriott.ru/works/primer/borderfon.html

Спасибо. А что если фон красный измениться?

[Softlink]

Если можно, приведи пожалуйста решение. Просто хочу понять, о чём идёт речь.

http://www.alpatriott.ru/works/primer/borderfon.html

Спасибо. А что если фон красный измениться?

а это уже издержки Т.е. если без скриптов, то это один из вариантов решения. Что еще можно придумать?

[E5000]

Ух, ничего себе! А почему min-height так срабатывает в этом случае? Почему он начинает растягивать дивы до высоты центрального блока? Насколько такое решение поддерживаемо в браузерах?

Здорово...)

<div style="width: 108px; min-height: 100px;background-color:lime; ">

<div style="width: 4px; height: inherit; float: left;">1</div>
<div style="width: 4px; height: inherit; float: right;">2</div>
<div style="background-color:blue; width: 100px; margin-left: 4px; margin-right: 4px;">
        asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>asdf<br>
</div>

</div>

[psywalker]

Если можно, приведи пожалуйста решение. Просто хочу понять, о чём идёт речь.

http://www.alpatriott.ru/works/primer/borderfon.html

Спасибо. А что если фон красный измениться?

а это уже издержки Т.е. если без скриптов, то это один из вариантов решения. Что еще можно придумать?

Как что? Во-первый блок у нас фикс. Во-вторых такие вещи легко делаются одной картинкой, и с одним блоком, без обёрток. В-третьих мы просто делаем полоску пнг, на разных сторонах которой будут наши картинки, и растягиваем её по оси-y, и всё.

[sigma77]

Как что? Во-первый блок у нас фикс. Во-вторых такие вещи легко делаются одной картинкой, и с одним блоком, без обёрток. В-третьих мы просто делаем полоску пнг, на разных сторонах которой будут наши картинки, и растягиваем её по оси-y, и всё.

Не. Без обёрток не обойтись. Блоки могут быть различной ширины. Т.е. Один блок - 200px, другой такой же, но 300.

п.с. Ну если только на ИЕ забить. Тогда множественным бекграундом можно разрулить.

[E5000]

Да ладно? Где здесь куча картинок?

http://jsfiddle.net/rbfmr/

О, потрясающее решение! Я неправильно его представлял. Очень круто! Спасибо!

Тогда множественным бекграундом можно разрулить.

А это что ещё за зверь? )

Edited June 27, 2011 by E5000

[gart]

Ух, ничего себе! А почему min-height так срабатывает в этом случае? Почему он начинает растягивать дивы до высоты центрального блока? Насколько такое решение поддерживаемо в браузерах?

Здорово...)

<div style="width: 108px; min-height: 100px;background-color:lime; ">

<div style="width: 4px; height: inherit; float: left;">1</div>
<div style="width: 4px; height: inherit; float: right;">2</div>
<div style="background-color:blue; width: 100px; margin-left: 4px; margin-right: 4px;">
        asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>asdf<br>
</div>

</div>

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

Edited June 27, 2011 by gart