Верстка 3 резиновых колонок + резиновые изображения в них.
Категории:HTML-верстка, Для начинающих
Теги: 3 колонки, css
Опубликовано:
28-08-2010
28-08-2010
В своем блоге я уже писал про верстку трех колоночного сайта, но здесь немного другой принцып. Эти колонки больше подходят для послеконтентной информации. На многих сайтах и блогах можно встретить внизу страницы 3 колонки в которых выводится информация о твиттере или rss, так же может какие-то разделы или комментарии и так далее. Ладно. Итак, поехали углубляться.
Для начала пишем каркас в html:
1 2 3 | <div class="block"><img src="1.jpg" width="90%" height="90%" /></div> <div class="block"><img src="1.jpg" width="90%" height="90%" /></div> <div class="block"><img src="1.jpg" width="90%" height="90%" /></div> |
Дальше идем в CSS:
1 2 3 4 5 6 | .block{ position:relative; width:33%; display:block; float:left; } |
Ну что же, вот и все. Пробуйте. Конечный вариант можно посмотреть здесь.
Затеял ремонт в комнате. Решил поставить двухстворчатые двери. Говорят очень оригинальное решение. Да и к моему интерьеру подходит.
Похожие статьи:

