Простое позиционирование DIV, а куча проблем!

[sergey-starostenko]

Доброе время суток! Нашел в инете такую идею реализации блоков. Пытался ее реализовать 2 дня, не все получается, что хочется. Можете помочь кодом? Дело в том, что она еще и резиновая. Спасибо большое. 

[Great Rash]

http://codepen.io/GreatRash/pen/MwaRmp

[Yazon_Nile]

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

[Jack_V]

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

 

А вот если поровнять все по float, это считается ошибкой?

[DivMan]

Как-то так http://allnet.16mb.com/rezina/

 

Только мне кажется, что блок с текстом, это не картинка, а просто текст на фоне.

Edited May 7, 2015 by DivMan

[Switch74]

я бы в оду колонку делал, по сути идет чередование текст+картинка, картинка+текст

[rus]

можно еще вот так: http://jsfiddle.net/rus333/suzeu6o5/

[Yazon_Nile]

я бы в оду колонку делал, по сути идет чередование текст+картинка, картинка+текст

Ну да. И так тоже можно)

[sergey-starostenko]

Проблема в том, что высота div с текстом должна автоматически изменятся, так же как и высота картинки в div img.

[Switch74]

дык высота div по умолчанию автоматом и меняется в зависимости от высоты контента

высоту блока с картинкой менять через position:absolute. Единственное, вам нужно будет в таком случае предусмотреть тот факт, что текста может быть так много, что картинка будет смотреться нелепо, или на оборот - мало. Для этого нужно будет ограничить размеры текстового блока через min-height и max-height, а картинку подбирать такую, чтобы хорошо смотрелась при размерах установленными вами границ

[sergey-starostenko]

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

[Switch74]

покажите что у вас получается
http://jsfiddle.net/

[sergey-starostenko]

Вот код: 

а вот результат:

Черный блок, который находится выше красного предназначен именно для всего этого. А получается, что все эти div располагаются поверх всего. http://jsfiddle.net/23r802rm/

Edited May 7, 2015 by sergey-starostenko

[Switch74]

Я не заметил подобного в примере

как вариант реализации http://jsfiddle.net/23r802rm/1/

[sergey-starostenko]

прошу меня простить, если что то не так. Но я добавил картинку

(<div class="img1"><img src="b-img1.jpg"><div class="text">text</div></div>),

поэкспериментировал с ее шириной, ничего не получилось. 

Вот картинка  - http://cs623421.vk.me/v623421890/1e08e/yUDYGfREBTc.jpg. Если можете помочь, буду очень признателен. 

 

Edited May 7, 2015 by sergey-starostenko

[Int]

А на флексах?

http://codepen.io/anon/pen/aOvxVG

[sergey-starostenko]

Спасибо всем ОГРОМНОЕ!!! Все получается. Еще раз - СПАСИБО ВСЕМ))