Css 创建div的布局

我想创建div的布局，比如：问题是我需要创建一行，我的意思是它将是post，最后一个是中间最大的，另外4个在侧面。我将使用query，这就是为什么我需要以这种方式创建（我不能得到5次潜水，并且每个潜水都有自己的css）

我的代码：

---

这可能是一个解决方案

.grid all{
宽度：100%；
溢出：隐藏；
}
.表格项目{
宽度：100%；
垫面：25%；
高度：120px；
背景色：红色；
溢出：隐藏；
显示：块；
}
.身高2{
宽度：100%；
高度：240px；
}
.grid col{
浮动：左；
宽度：25%；
}
大格子{
浮动：左；
宽度：50%；
}

---

这可能是一个解决方案

.grid all{
宽度：100%；
溢出：隐藏；
}
.表格项目{
宽度：100%；
垫面：25%；
高度：120px；
背景色：红色；
溢出：隐藏；
显示：块；
}
.身高2{
宽度：100%；
高度：240px；
}
.grid col{
浮动：左；
宽度：25%；
}
大格子{
浮动：左；
宽度：50%；
}

---

只需使用

float

的简单解决方案，希望对您有所帮助。多谢各位

编辑了您最后的评论。 使用

位置属性

和

第n个子属性

css属性

.grid all{
位置：相对位置；
宽度：400px；
}
.表格项目{
宽度：100px；
高度：100px；
}
.身高2{
宽度：200px；
高度：200px；
背景：红色；
位置：绝对位置；
顶部：0px；
左：100px；
}
.网格项：第n个子项（4）{
位置：绝对位置；
右：0px；
顶部：0px；
}
.网格项：第n个子项（5）{
位置：绝对位置；
右：0px；
顶部：100px；
}

---

只需使用

float

的简单解决方案，希望对您有所帮助。多谢各位

编辑了您最后的评论。 使用

位置属性

和

第n个子属性

css属性

.grid all{
位置：相对位置；
宽度：400px；
}
.表格项目{
宽度：100px；
高度：100px；
}
.身高2{
宽度：200px；
高度：200px；
背景：红色；
位置：绝对位置；
顶部：0px；
左：100px；
}
.网格项：第n个子项（4）{
位置：绝对位置；
右：0px；
顶部：0px；
}
.网格项：第n个子项（5）{
位置：绝对位置；
右：0px；
顶部：100px；
}

Ty以获取答案。但是，有可能不使用这种“主要”包装来实现吗？正如我写的，这将是一个查询。你的意思是只使用html而不干扰它？太好了！这就是我需要的！泰，伙计，回答泰。但是，有可能不使用这种“主要”包装来实现吗？正如我写的，这将是一个查询。你的意思是只使用html而不干扰它？太好了！这就是我需要的！TY mate.TY是答案，但不确切。在html中，我只有主包装器、查询和div。我不能在queryTy中插入/抛出一列来获得答案，但不能完全如此。在html中，我只有主包装、查询和div。我不能在查询中插入/抛出列

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