Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Нужна помощь по CSS (обтекание в DIV'ах)

Нужна помощь по CSS (обтекание в DIV'ах)


     07.03.2013    CSS, DIV    Все вопросы » Стили (CSS)    3585

вопрос
Всем привет!

Столкнулся тут с проблемой которую не могу никак решить, может Вы что посоветуете?

Есть задача запихнуть в один DIV, 3 поля для данных (скорее всего тоже div'a) причем четка имеющих свое расположение.. С двумя я справился а вот с третим возникла проблема. В общем показать проще чем обяснить, смотрите картинку:

Нужна помощь по CSS (обтекание в DIV'ах)



Объясняю что есть что на данной миниатюре:

0. Самый большой DIV (квадрат) - родитель. Внутри него будут размещены все остальные дивы с выравниванием как на рисунке. В нем, фоном будет картинка новости.
1. Заголовок статьи с не определенной длиной, т.е. div резиновый должен быть.
2. Поле для рейтинга статьи, практически фиксированной длины.
3. Поле для иконок категорий, должно быть резиновым с максимальной длиной примерно 16px.


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

*****Название новости


Я убрал лишние стили типа теней, закругленных бордюров, прозрачности и т.д. оставил только основное чтобы не было путаницы.

Каким образом я не пытаюсь его вставить, всюду что то сдвигается и меняет свое местоположение. Пробовал играться с float, размещением третьего div'a и даже z-index с position - ничего не помогает, надеюсь на Вас.

Ответил: nowheremany


так было уже...

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}

6 комментариев

BR0kEN
Эксперт

BR0kEN - 7 марта 2013 23:37 -

Код из ответа работать не будет. А div.class - вообще ужас.

Вот демо: http://jsfiddle.net/BR0kEN/FT9mH/12/

Sander
PHP-developer

Sander - 8 марта 2013 03:37 -

И чем же ужас? div как div...

PS. Ответ исправил.

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

BR0kEN
Эксперт

BR0kEN - 8 марта 2013 12:55 -

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

nowheremany
Эксперт

nowheremany - 8 марта 2013 13:39 -

Нафиг холивар заводить - всем понятно же что зависит от ситуации

Благодарность принимаю тут Связь

Serik
Местный

Serik - 8 марта 2013 16:50 -

Какие обтекания, Вы о чём ?? Девушек, жен, сестёр и дочек - вот кого сегодня надо "обтекать" )) Ну ка поднимите задницу с кресла и бегом ублажать ваших прекрасных!!!

СПАСИБО надо тыкать в кнопку!

YoYoYo
Юзер

YoYoYo - 9 марта 2013 22:53 -

Офигеть, уже и не ждал ответа! Специально зарегистрировался чтобы сказать - огромное человеческое СПАСИБО!

А то я уже всю голову сломал с этими стилями! )

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх