html - 使用 CSS 平铺页面

Question

我想水平和垂直地平铺我的页面，也想递归地平铺我的页面。例如。该页面被分成三列，其中第三列被分成两行。

<div id="left/>
<div id="right">
    <div id="top">...</div>
    <div id="bottom">...</div>
</div>

这个 fiddle 解释了我在说什么: https://jsfiddle.net/zuyu1ed7/

此设计有效，直到您开始添加内容。为这些容器之一提供边框、边距或填充会导致困惑。整个布局看起来很合理。

此外，尝试添加 <div style="width:100%; padding: 10px;"/>这些容器内部具有相同的布局破坏效果。这种情况超越了我对css的认识。

起初我想到了使用表格，如果 css 一直 mock 你，你最好的 friend 。但是后来我看到html5不再支持大多数colgroup -属性。所以这个想法是死路一条。

我的问题是:如何如 fiddle 所示水平和垂直拆分 div 并能够向容器中添加内容？
我很感谢任何解决方案，但我当然更喜欢适用于所有浏览器的解决方案。

Answer 1

你考虑过flexbox吗？基本支持by all modern browsers .

Fiddle

html, body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
}

#left {
  height: 100%;
  width: 20%;
  background-color: Blue;
}

#right {
  height: 100%;
  width: 80%;
  background-color: Green;
  display: flex;
  flex-direction: column;
}

#top {
  width: 100%;
  height: 33.33%;
  background-color: lightblue;
}

#center {
  width: 100%;
  height: 33.33%;
  background-color: lightgreen;
}

#bottom {
  width: 100%;
  height: 33.34%;
  background-color: black;
  display: flex;
}

#bottom-left {
  height: 100%;
  width: 35%;
  background-color: Yellow;
}

#bottom-right {
  height: 100%;
  width: 65%;
  background-color: orange;
}

<div id="left">
  </div>
  <div id="right">
      <div id="top"></div>
      <div id="center"></div>
      <div id="bottom">
          <div id="bottom-left"></div>
          <div id="bottom-right"></div>
      </div>
  </div>