使用Bourbon整齐复制表布局

Question

我正在尝试使用div和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/

基本上，我希望布局高度由"Right“div中的任何内容决定。

"Top“div是父容器的50%的宽度和高度，它被拉伸到"Right”的高度。

而“下”div的宽度是"Top“div的50%，也是父容器的50%。

如果你看一下Jsfiddle，就会明白这一点。哦，它还需要有响应性。

对于菜鸟的问题，我很抱歉，但我才刚刚开始使用Bourbon/Neat。

谢谢。

Answer 1

作为一个快速说明，这将是一个完美的the upcoming CSS Grid system用例(此时您需要使用to activate it )。这将在三月份冲击FF和Chrome。

使用Flexbox，我们会使用一些嵌套的flex容器，其中一个会将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>

​