Попросил на днях один пользователь panda97 как сверстать блоки на divах и реализуем их растяжение, собственно описываю
Урок будет несложный примеры и скриншоты будут присутстовавать.Ну для начала реализуем слой самого блока
html:
css:
.block { background: #198481; width: 250px; height: 100%; }
Такс теперь разъясняю, background думаю тут все понятно, за ширину блока (width) я взял 250px, ширину ставим 100%, для чего 100% я расскажу вам дальше.
Теперь сделаем название блока и само его содержание:
html:
НазваниеСодержание проверяем наличие переноса строки
Содержание 2
Содержание 3
Содержание 4
Содержание 5
css:
.block { margin-left: 100px; margin-top: 100px; background: #198481; width: 250px; height: 100%; }.nameblock { backround: #00cccc; width: 250px; height: 29px; }
.contentblock { background: #08e8de; width 250px; height: 100%}
class block — отвечает за построение самого блока.
class nameblock — отвечает за вывод слоя с названием.
class contentblock — отвечает за вывод слоя с нашим текстом.собственно мы и построили блок, по структуре такой же как и на остальных сайтах.
А теперь я объясню, что же нам дает высота 100%
Если её не указать, а зафиксировать к примеру 200px, то наш блок будет оставаться на месте, а текст выходить за рамки: Ну и сам наш готовый результат:
Пример можно посмотреть тут
Если возникнут вопросы писать ниже в комментариях 😉
С вами был DragoN
Источник: http://d-ragon.ru/