Сегодня я расскажу как сделать простенькую галерею с описанием к каждой картинке по правой стороне в две колонки.
Вот как это будет выглядеть смотрим
Мы будем использовать всего лишь два тега это img и span, для обоих в стилях установим обтекание по левой стороне, дело в том что мы не заключаем каждую картинку и текст в контейнер, потому что и так все будет работать хорошо за исключением ie6, а для того чтоб и тут было все как нужно, после каждой второй картинки с описанием мы поставим очиститель, вот код html
1 2 3 4 5 6 | <img src="1.jpg" alt="" /><span>Большое описание 1</span> <img src="2.jpg" alt="" /><span>Большое описание 2</span> <br class="clear"/> <img src="3.jpg" alt="" /><span>Большое описание 3</span> <img src="4.jpg" alt="" /><span>Большое описание 4</span> <br class="clear"/> |
а вот css
1 2 3 4 | body{width:960px;margin:0 auto;} img{float:left;} span{float:left; width:280px; padding-bottom:20px;} .clear{clear:both;} |
Совсем не много кода, правда?
для текста устанавливаем точную ширину, не забывайте учитывать ширину картинок, у меня ширина главного блока то есть body равна 960px, ширина картинки 200px а их 2 на строку то получается 400px, под текст остается 560px тоже делим на два получаем 280px, так как у нас нет ни каких отступов по сторонам такую ширину и ставим.
Кому то может не понравиться такая модель, тогда можно каждую картинку с описанием взять в контейнер и прописать для него хак, но все равно это не будет идеальным решением.
html
1 2 3 4 | <div class="float"><img src="1.jpg" alt="" /><span>Большое описание 1</span></div> <div class="float"><img src="2.jpg" alt="" /><span>Большое описание 2</span></div> <div class="float"><img src="3.jpg" alt="" /><span>Большое описание 3</span></div> <div class="float"><img src="4.jpg" alt="" /><span>Большое описание 4</span></div> |
css
1 2 3 4 5 | body{width:960px;margin:0 auto;} .float{_display:inline; zoom:1;} .float img{float:left;} .float span{float:left; width:280px; padding-bottom:20px;} .clear{clear:both;} |
тут пример
Ну вот и всё, усли все это красиво оформит можно организовать очень не плохое портфолио, спасибо за внимание.
Загрузка ...