Главная страница  /  Занятия  /  #4  /  Сверстать html-документ по приведенному макету

Сверстать html-документ по приведенному макету

Задание:

Есть макет:


Необходимо сверстать html-документ согласно вышеприведенному макету с использованием блочного типа верстки так, чтобы указанные пропорции сохранялись при различных разрешениях экрана. При этом высота блоков с красной рамкой в зависимости от их содержимого может меняться и быть разной, но в каждой строке они должны быть выровнены по верхней границе.

Посмотреть решение

html-документ (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>&#171;Резиновый&#187; документ с блоками</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="mainContainer">
      <div>
       <div>Первый блок.</div>
       <div>Второй блок.</div>
       <div>Третий блок.</div>
       <div>Четвертый блок.</div>
      </div>
      <div>
       <div>Пятый блок.</div>
       <div>Шестой блок.</div>
       <div>Седьмой блок.</div>
       <div>Восьмой блок.</div>
      </div>
      <div>
       <div>Девятый блок.</div>
       <div>Десятый блок.</div>
       <div>Одиннадцатый блок.</div>
       <div>Двенадцатый блок.</div>
      </div>
     </div>
    </body>
   
   </html>

CSS–разметка (styles.css):

   html, body			{ width: 100%; height: 100%; margin: 0; padding: 0; }
   div				{ width: 100%; float: left; box-sizing: border-box; overflow: hidden; }
   
   #mainContainer   div		{ margin-left: 4%; width: 20%; border: 1px solid #ff0000; }
   #mainContainer > div		{ width: 100%; margin: 30px 0px 0px 0px; border: 0; }

Результат:

Результат выполнения задания можно посмотреть здесь.