Репликация макет таблицы с помощью Bourbon Аккуратные

Question

Я пытаюсь повторить этот макет таблицы с помощью дивы и Бурбон Аккуратные:

<table border="1"> 
     <tr> 
      <td colspan="2" class="top">Top</td> 
      <td colspan="2" rowspan="2" class="right">Right</td> 
     </tr> 
     <tr> 
      <td class="lower">Lower</td> 
      <td class="lower">Lower</td> 
     </tr> 
    </table> 

https://jsfiddle.net/m72pefgd/

В основном я хочу высота макета диктоваться то, что в «правый» div.

«Верхний» div составляет 50% ширины & Высота родительского контейнера, который растянут до высоты «Вправо».

И «нижние» divs - это 50% -ная ширина «верхнего» div и 50% родительского контейнера.

Если вы посмотрите на Jsfiddle, это имеет смысл. О, и это также должно быть отзывчивым.

Извинения за вопрос о нобе, но я только начинаю с Bourbon/Neat.

Спасибо.

Answer 1

Как бы то ни было, это идеальный вариант использования для the upcoming CSS Grid system (вам понадобится to activate it для использования на данный момент). Это касается FF и Chrome в марте.

С помощью Flexbox мы использовали бы несколько вложенных гибких контейнеров, один из которых имел бы flex-direction, установленный в column. Ниже приведен фрагмент ниже, чтобы вы начали. Я использовал flex-grow: 1 на все, чтобы получить их, чтобы заполнить пространство одинаково, но width: 50% может быть более уместным, чтобы получить расколы в точности.

Общая обертка позаботится о том, чтобы левая и правая стороны были одинаковой высоты. При меньших размерах браузера, вероятно, я бы сделал свой элемент .l-wrap, внешнюю оболочку, flex-direction: column, или установил его обратно на display: block с некоторым использованием width: 100%;, чтобы быть явным, если необходимо.

/* start setup */ 
 
* { 
 
    min-width: 50px; 
 
    min-height: 50px; 
 
    box-sizing: border-box; 
 
} 
 
.bg { 
 
    border: 1px solid #a20; 
 
    background-color: rgba(125, 25, 65, .15); 
 
} 
 
.l-wrap { 
 
    width: 80%; 
 
    height: 80%; 
 
} 
 
/* end setup */ 
 

 
.l-wrap, 
 
.l-left, 
 
.l-bottom { 
 
    display: flex; 
 
} 
 

 
.l-left { 
 
    flex-direction: column; 
 
} 
 

 
.l-left, 
 
.l-right, 
 
.l-top, 
 
.l-bottom, 
 
.l-column { 
 
    flex-grow: 1; 
 
}

<section class="l-wrap bg"> 
 
    <article class="l-left bg"> 
 
    <header class="l-top bg"> 
 
    </header> 
 
    <div class="l-bottom bg"> 
 
     <div class="l-column bg"></div> 
 
     <div class="l-column bg"></div> 
 
    </div> 
 
    </article> 
 
    <aside class="l-right bg"> 
 
    </aside> 
 
</section>