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和left float: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>