CSS divを他のdivの下に移動

Question

メトロダッシュボードの一部のdiv要素に問題があります。 私のコードのサンプルは以下のスニペットにあります。

2と3の下のタイル4と5をこの空き室に埋める方法はありますか？

.tile-group-4x2 { 
 
    width: 216px; 
 
    height: 108px; 
 
} 
 

 
.tile-1x1 { 
 
    margin: 2px 2px 2px 2px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: #67D4FF; 
 
    float: left; 
 
} 
 
    
 
.tile-2x2 { 
 
    margin: 2px 2px 2px 2px; 
 
    height: 104px; 
 
    width: 104px; 
 
    background: #67D4FF; 
 
    float: left; 
 
}

<div class="tile-group-4x2"> 
 
    <div class="tile-2x2">1</div> 
 
    <div class="tile-1x1">2</div> 
 
    <div class="tile-1x1">3</div> 
 
    <div class="tile-1x1">4</div> 
 
    <div class="tile-1x1">5</div> 
 
</div> 
 
<p> 
 
Is there any way to move tile 4 and 5 under 2 and 3 to fill this empty room. 
 
</p> 
 
<div class="tile-group-4x2"> 
 
    <div class="tile-1x1">2</div> 
 
    <div class="tile-1x1">3</div> 
 
    <div class="tile-2x2">1</div> 
 
    <div class="tile-1x1">4</div> 
 
    <div class="tile-1x1">5</div> 
 
</div>

Answer 1

あなたのソリューション@tomtoxx_ここ

.tile-group-8x4 { 
 
    width: 216px; 
 
    height: 108px; 
 
} 
 

 
.tile-1x1 { 
 
    margin: 2px 2px 2px 2px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: #67D4FF; 
 
    float: left; 
 

 
} 
 
    
 
.tile-2x2 { 
 
    margin: 2px 2px 2px 2px; 
 
    height: 104px; 
 
    width: 104px; 
 
    background: #67D4FF; 
 
    float: right; 
 
    
 
}

<div class="tile-group-8x4"> 
 
    <div class="tile-2x2">1</div> 
 
    <div class="tile-1x1">2</div> 
 
    <div class="tile-1x1">3</div> 
 
    <div class="tile-1x1">4</div> 
 
    <div class="tile-1x1">5</div> 
 
</div> 
 
<p> 
 
Is there any way to move tile 4 and 5 under 2 and 3 to fill this empty room. 
 
</p> 
 
<div class="tile-group-8x4"> 
 
    <div class="tile-1x1">2</div> 
 
    <div class="tile-1x1">3</div> 
 
    <div class="tile-2x2">1</div> 
 
    <div class="tile-1x1">4</div> 
 
    <div class="tile-1x1">5</div> 
 
    
 
</div>

Answer 2

あるはい、これは実際に可能です。だからクラスtile-2x2のために私はクラスrightとleftを追加しました。 rightは、float:rightおよびleftfloat:leftを有する。ちょうどHTMLの左または右を追加するだけでいいです。

.tile-group-4x2 { 
 
    width: 216px; 
 
    height: 108px; 
 
} 
 

 
.tile-1x1 { 
 
    margin: 2px 2px 2px 2px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: #67D4FF; 
 
    float: left; 
 
} 
 
    
 
.tile-2x2 { 
 
    margin: 2px 2px 2px 2px; 
 
    height: 104px; 
 
    width: 104px; 
 
    background: #67D4FF; 
 
    float: left; 
 
} 
 
.left{ 
 
    float:left; 
 
} 
 
.right{ 
 
    float:right; 
 
}

<div class="tile-group-4x2"> 
 
    <div class="tile-2x2 left">1</div> 
 
    <div class="tile-1x1">2</div> 
 
    <div class="tile-1x1">3</div> 
 
    <div class="tile-1x1">4</div> 
 
    <div class="tile-1x1">5</div> 
 
</div> 
 
<p> 
 
Is there any way to move tile 4 and 5 under 2 and 3 to fill this empty room. 
 
</p> 
 
<div class="tile-group-4x2"> 
 
    <div class="tile-1x1">2</div> 
 
    <div class="tile-1x1">3</div> 
 
    <div class="tile-2x2 right">1</div> 
 
    <div class="tile-1x1">4</div> 
 
    <div class="tile-1x1">5</div> 
 
</div>