不同高度的网格系统css

Question

我是html＆css的新手，我试图设置以下网格系统： 当前状态

看起来像这样： 所需的解决方案

我的html代码由2个主要div组成（每个“行”），每个div包含2个div（徽标+注释，导航+内容），我使用过display：inline-block in each div，但仍然无法弄清楚如何将蓝色框直接放在黄色框下面？ 我更喜欢没有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列。

 .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; } 

 <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>