創建div的佈局

Question

我想創建div的佈局，例如：問題是我需要在一行中創建它，我的意思是它將是帖子，最後是最大的中心和其他4是在兩側。我將使用查詢，這就是爲什麼我需要以這種方式創建（我不能得到5次潛水和每個人都有自己的CSS）。

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

<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

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