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/

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

“Top”div的宽度为50％＆amp;父容器的高度，它被拉伸到“右”的高度。

“Lower”div是“Top”div的50％宽度和父容器的50％。

如果你看看Jsfiddle就有意义了。哦，它也需要响应。

为noob问题道歉，但我刚刚开始使用Bourbon / Neat。

感谢。

Answer 1

快速说明一下，这将成为the upcoming CSS Grid system的完美用例（目前您需要to activate it才能使用）。这将在3月份击中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>

使用Bourbon Neat复制表格布局

1 个答案: