Макет с использованием divs

Question

Я провел некоторое исследование по макетам и, по-видимому, используя HTML tables для макета вашей страницы. Поэтому альтернативой является использование div.

У меня есть следующий макет, разработанный и хочу знать, как я буду реализовывать это с помощью div. В частности, как бы я получил 3 панели наверху, чтобы выровнять по вертикали с панелью внизу, которая растягивала длину всех трех панелей.

Смогу ли я сделать это исключительно с помощью CSS и HTML?

Вот дизайн:

Answer 1

Элемент <table> не имеет семантического значения при использовании для макетов. Он должен использоваться только для данных.

Тем не менее, CSS имеет хорошую альтернативу:

display: table; 

и

display: table-cell; 

Посмотреть этот example.

Ваш макет состоит из двух отдельных «таблиц». Существует также table-row для создания столбцов с одинаковой шириной по нескольким строкам. У него нет альтернатив colspan, thead и других элементов таблицы, но он должен выполнять работу для простого макета.

Answer 2

Да, это вполне возможно в чистом CSS и HTML.

Рассмотрим этот код:

.small-box { 
 
      width: 200px; 
 
      height: 200px; 
 
      float: left; 
 
      border: 1px solid #ccc; 
 
     } 
 
     
 
     .large-box { 
 
      width: 606px; 
 
      height: 200px; 
 
      clear: both; 
 
      border: 1px solid #ccc; 
 
     }

<div class="small-box">some content</div> 
 
     <div class="small-box">Some other content</div> 
 
     <div class="small-box">Another content</div> 
 
     <div class="large-box">Large box content</div>

Самое главное здесь является использование float и clear атрибутов. Вы можете сделать divs палкой вместе в одной строке с атрибутом float, и если вы хотите что-то под ними, используйте clear, чтобы «нажать» следующий элемент ниже. Одна вещь, однако, чтобы использовать float, элемент должен иметь атрибут width.