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

是的，这确实是可能的。因此，对于类 tile-2x2，我添加了类 right 和 left。 right 有 float:right 和 left float:left。因此，只需在 HTML 中添加 left 或 right，就​​可以了。

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