Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Блок картинок

Автор: MrDmitry 5.2.2013, 13:04

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

http://radikal.ru/F/s003.radikal.ru/i203/1302/1a/a5a7d9bafd5f.png.html
У меня нарисовано не ровно, естественно в 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;
}

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

Автор: Arantir 5.2.2013, 13:36

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

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