html - CSS正确地定位股利

Question

我尝试使用CSS定位以下7个div，如下所示：

<div id="id_div_wrapper">
    <div id="id_div1">
        Div 01
    </div>
    <div id="id_div2">
        Div 02
    </div>
    <div id="id_div3">
        Div 03
    </div>
    <div id="id_div4">
        Div 04
    </div>
    <div id="id_div5">
        Div 05
    </div>
    <div id="id_div6">
        Div 06
    </div>
    <div id="id_div7">
        Div 07
    </div>
</div>

我已经用谷歌搜索并搜索了答案，但是我被困住了，希望有人可以向我展示如何使用CSS正确定位div，如上所示。

我不确定如何将div6和div7放置在div3，div4和div5旁边但在div2之下。我已经尝试了好几个小时，但是我正在摸索如何使用CSS。

Answer 1

http://codepen.io/pacMakaveli/pen/zGxzMW

这应该使您入门。但是，请尝试使用网格，例如Bootstrap：http://getbootstrap.com/

除非您尝试学习。

* {
  box-sizing: border-box
}

.grid {
  padding: 50px;
  border: 2px solid transparent;
}

#id_div1,
#id_div2,
#id_div3,
#id_div4,
#id_div5 {
  width: 100%;
}

#id_div1 {
  border-color: red;
}

#id_div2 {
  border-color: blue;
}

.aside {
  float: left;
  width: 30%;
}

#id_div3 {
  border-color: orange;
}

#id_div4 {
  border-color: orange;
}

#id_div5 {
  border-color: orange;
}

#id_div6,
#id_div7 {
  width: 70%;
  float: left;
}

#id_div6 {
  border-color: black;
}

#id_div7 {
  border-color: blue;
}