вопрос
Всем привет!
Столкнулся тут с проблемой которую не могу никак решить, может Вы что посоветуете?
Есть задача запихнуть в один DIV, 3 поля для данных (скорее всего тоже div'a) причем четка имеющих свое расположение.. С двумя я справился а вот с третим возникла проблема. В общем показать проще чем обяснить, смотрите картинку:
Объясняю что есть что на данной миниатюре:
0. Самый большой DIV (квадрат) - родитель. Внутри него будут размещены все остальные дивы с выравниванием как на рисунке. В нем, фоном будет картинка новости.
1. Заголовок статьи с не определенной длиной, т.е. div резиновый должен быть.
2. Поле для рейтинга статьи, практически фиксированной длины.
3. Поле для иконок категорий, должно быть резиновым с максимальной длиной примерно 16px.
Вот код который у меня получился для всего этого безобразия, но без 3 вложения.
Я убрал лишние стили типа теней, закругленных бордюров, прозрачности и т.д. оставил только основное чтобы не было путаницы.
Каким образом я не пытаюсь его вставить, всюду что то сдвигается и меняет свое местоположение. Пробовал играться с float, размещением третьего div'a и даже z-index с position - ничего не помогает, надеюсь на Вас.
Столкнулся тут с проблемой которую не могу никак решить, может Вы что посоветуете?
Есть задача запихнуть в один DIV, 3 поля для данных (скорее всего тоже div'a) причем четка имеющих свое расположение.. С двумя я справился а вот с третим возникла проблема. В общем показать проще чем обяснить, смотрите картинку:
Объясняю что есть что на данной миниатюре:
0. Самый большой DIV (квадрат) - родитель. Внутри него будут размещены все остальные дивы с выравниванием как на рисунке. В нем, фоном будет картинка новости.
1. Заголовок статьи с не определенной длиной, т.е. div резиновый должен быть.
2. Поле для рейтинга статьи, практически фиксированной длины.
3. Поле для иконок категорий, должно быть резиновым с максимальной длиной примерно 16px.
Вот код который у меня получился для всего этого безобразия, но без 3 вложения.
*****Название новости
Я убрал лишние стили типа теней, закругленных бордюров, прозрачности и т.д. оставил только основное чтобы не было путаницы.
Каким образом я не пытаюсь его вставить, всюду что то сдвигается и меняет свое местоположение. Пробовал играться с float, размещением третьего div'a и даже z-index с position - ничего не помогает, надеюсь на Вас.
так было уже...
html
css
html
<div class="main">
Текст
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css
div.main{position:relative;}
div.div1,
div.div2,
div.div3{position:absolute;}
div.div1{top:0;left:0}
div.div1{top:0;right:0}
div.div1{bottom:0;left:0}
