VPF::Блок картинок - Форум программистов

MrDmitry

Дата 5.2.2013, 13:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Помогите сверстать такой вот блок.

У меня нарисовано не ровно, естественно в html должно быть ровно ))

Я попробовал сделать так.

Код


   <span class="left"><img src="images/photo1.jpg" alt=""><div class="inf">текст</div><div></div></span>
   <span class="right"><img src="images/photo2.jpg" alt=""><div class="inf">текст</div><div></div></span>
   <span class="center"><img src="images/photo3.jpg" alt=""><div class="inf">текст</div><div></div></span>

Код


.left {
float:left;
}
.right{
float:right;
}

У меня отображается все ровно, но я чувствую что сделано не правильно к тому же выше блока картинку у меня находится блок со спойлером, при открывании которого все фотографии разъезжаются. Надеюсь на вашу помощь )

Это сообщение отредактировал(а) MrDmitry - 5.2.2013, 13:04

Arantir

Дата 5.2.2013, 13:36 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

Ну первое - сунуть блочные в строчные - это не есть гуд.

Все можно решить простым inline-block: http://jsfiddle.net/78ssN/
Кроме того, блок получается с адаптивным размером. При потребности можно задать фиксированную ширину внешнему блоку.

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »