Верстка 3 резиновых колонок + резиновые изображения в них.

Категории:HTML-верстка, Для начинающих
Теги: ,

Опубликовано:
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;
}

Ну что же, вот и все. Пробуйте. Конечный вариант можно посмотреть здесь.

Затеял ремонт в комнате. Решил поставить двухстворчатые двери. Говорят очень оригинальное решение. Да и к моему интерьеру подходит.


Похожие статьи:


Оставить комментарий

*