使用波旁威士忌整洁复制表布局

Question

我正在尝试使用Divs和Bourbon Neat复制此表布局：

    <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中的任何内容决定。

" top"div为50％宽度＆amp;父容器的高度，该容器延伸至"右"的高度。

和"较低"divs均为"顶部"div的50％宽度和父容器的50％。

如果您查看JSFIDDLE是有道理的。哦，这也需要做出响应。

对菜鸟问题表示歉意，但我只是从波旁威士忌/整洁开始。

谢谢。

Answer 1

很快，对于即将到来的CSS网格系统来说，这将是一个完美的用例（目前您需要激活它以使用它）。这将在三月打入FF和Chrome。

使用Flexbox，我们将使用一些嵌套的Flex-Containers，其中之一将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>