创建div布局

Question

我想创建这样的 div 布局：问题是我需要连续创建它，我的意思是它将是帖子，最后一个是中间最大的，其他 4 个是在两侧。我将使用查询，这就是为什么我需要以这种方式创建（我无法进行 5 次潜水，而且每次潜水都有自己的 css）。

<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="clear: both;"></div>
    <div class="grid-item" style=" background-color: green;"></div>
    <div class="grid-item" style=" background-color: black;"></div>
</div>

Answer 1

这可能是一个解决方案。

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

Answer 2

只是使用 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>

创建div布局

Creating layout of divs

css

layout

css-float