创建div的布局

Question

我想创建div的布局，例如：问题是我需要连续创建它，我的意思是它将是帖子，最后一个是中心最大的，其他4个是两侧。我将使用查询，这就是为什么我需要以这种方式创建（我不能获得5次潜水，每次都有自己的css）。

我的代码：https://jsfiddle.net/kys2qzne/

for currentdate in soup.find_all('item'):
    element = currentdate.find('forecastIssue')
    print element['date'], element['time']

Answer 1

使用float的简单解决方案希望它有所帮助。谢谢。

使用您的上一条评论修改。 使用position property和nth-child css属性。

.grid-all{
  position:relative;
  width:400px;
}
.grid-item{
  width:100px;
  height:100px;
}
.height2{
  width:200px;
  height:200px;
  background:red;
  position:absolute;
  top:0px;
  left:100px;
}
.grid-item:nth-child(4){
  position:absolute;
  right:0px;
  top:0px;
}
.grid-item:nth-child(5){
  position:absolute;
  right:0px;
  top:100px;
}

<div class="grid-all" >
   <div class="grid-item" style=" background-color: blue;"></div>
    <div class="grid-item" style=" background-color: yellow;"></div>
    <div class="grid-item height2" style=""></div>
    <div class="grid-item" style=" background-color: green;"></div>
    <div class="grid-item" style=" background-color: black;"></div>
</div>

Answer 2

这可以是一个解决方案。

.grid-all{
 width: 100%;
 overflow: hidden;
}

.grid-item{
  width: 100%;
  padding-top:25%;
  height: 120px;
  background-color: red;
  overflow: hidden;
  display: block;
}

.height2{
  width: 100%;
  height: 240px;
}

.grid-col {
  float: left;
    width: 25%;
}

.grid-col-big {
  float:left;
  width: 50%;
}

<div class="grid-all" >
  <div class="grid-col">
    <div class="grid-item" style=" background-color: blue;"></div>
    <div class="grid-item" style=" background-color: yellow;"></div>
  </div>
<div class="grid-col-big">
  <div class="grid-item height2" style="clear: both;"></div>
</div>

<div class="grid-col">
    <div class="grid-item" style=" background-color: green;"></div>
  <div class="grid-item" style=" background-color: black;"></div>
</div>
</div>