不同高度的网格系统css

Question

我是html＆amp; css的新手，我正在尝试设置以下网格系统： current state

看起来像这样： desired solution

我的html代码由2个主要div组成（每个'row'），每个包含2个div（logo + notes，nav + content） 我在每个div中都使用了display：inline-block，但仍然无法弄清楚如何将蓝色框直接放在黄色框下面？ 我更喜欢没有jquery插件的解决方案，这是最简单的解决方案 感谢

代码：

.header {
  display: inline-block;
  width: 100%;
}
.logo {
  display: inline-block;
  width: 30%;
  height: 100px;
  background-color: red;
}
.notes {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: yellow;
}
.nav {
  display: inline-block;
  width: 30%;
  height: 50px;
  background-color: green;
}
.content {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: blue;
}

<div class="header">
  <div class="logo">
    Logo
  </div>
  <div class="notes">
    Notes
  </div>
</div>
<div class="main">
  <div class="nav">
    Nav
  </div>
  <div class="content">
    Content
  </div>
</div>

Answer 1

我知道这不是一个好方法，但这个方法有效。以下是我为您所做的更改.content：

  top: 50px;
  left: calc(30% + 7px);
  width: calc(69% - 10px);

以下是最终代码：

.header {
  display: inline-block;
  width: 100%;
}
.logo {
  display: inline-block;
  width: 30%;
  height: 100px;
  background-color: red;
}
.notes {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: yellow;
}
.nav {
  display: inline-block;
  width: 30%;
  height: 50px;
  background-color: green;
}
.content {
  display: inline-block;
  width: calc(69% - 10px);
  height: 50px;
  background-color: blue;
  position: fixed;
  top: 50px;
  left: calc(30% + 7px);
}

<div class="header">
  <div class="logo">
    Logo
  </div>
  <div class="notes">
    Notes
  </div>
</div>
<div class="main">
  <div class="nav">
    Nav
  </div>
  <div class="content">
    Content
  </div>
</div>

Answer 2

我会重新安排标记并制作2列。

＆＃13;

＆＃13;

.header {
  display: inline-block;
  width: 30%;
  float: left;
}
.logo {
  height: 100px;
  background-color: red;
}
.notes {
  height: 50px;
  background-color: yellow;  
}
.main {
  margin-left: 30%;
}
.nav {
  height: 50px;
  background-color: green;
}
.content {
  height: 50px;
  background-color: blue;
}

＆＃13;

<div class="header">
  <div class="logo">
    Logo
  </div>
  <div class="nav">
    Nav
  </div>
</div>
<div class="main">
  <div class="notes">
    Notes
  </div>
  <div class="content">
    Content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;