divのレイアウトを作成

Question

divのレイアウトを作成したい：問題は私がそれを行に作成する必要がある、私はそれが投稿されることを意味し、最後はセンターで最大であり、他の4つは側面。私はクエリを使用します。なぜこのように作成する必要があるのですか（私は5つのダイブと1つの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>