需要帮助将两个 div 移动到另一个 div 旁边

Question

大家好，我正在尝试将 a4 移动到 img 中显示的区域，但我找不到如何或任何有关如何将 2 个 div 移到 1 个 div 右侧的相关帖子，感谢任何和所有帮助。谢谢！

它应该是这样的：

这是我尝试过的代码：

.post-background {
    width: 100%;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}


.post-area {
    width: 80%;
    height: 500px;
    background: rgba(128, 0, 128, 0.1);
    display: block;
    border: 5px solid purple;

}

.a1 {
    text-align: center;
    width: 99.2%;
    height: 75px;
    background: rgba(255, 0, 0, 0.5);
    border: 5px solid red;
    display: block;
}

.a2 {
    text-align: center;
    width: 70%;
    height: 200px;
    background: rgba(0 0, 255, 0.5);
    border: 5px solid blue;
    display: inline-block;

}

.a3 {
    text-align: center;
    width: 20%;
    height: 75px;
    background: rgba(0 255, 0, 0.5);
    border: 5px solid green;
    display: inline-block;
    margin-left: 8%;
}

.a4 {
    text-align: center;
    width: 20%;
    height: 75px;
    background: rgba(0, 229, 255, 0.5);
    border: 5px solid rgb(0, 229, 255);
    display: inline-block;
    margin-left: 8%;

}

<div class="post-background">
<div class="post-area">

<div class="a1">
<h1>a1</h1>
</div>

<div class="a2">
<h1>a2</h1>
</div>

<div class="a3">
<h1>a3</h1>
</div>

<div class="a4">
<h1>a4</h1>
</div>

</div>
</div>

Answer 1

网格最适合布局。

.post-background {
  text-align: center;
}

.post-area {
  background: rgb(128 0 128 / 0.1);
  border: 5px solid purple;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1em;
}

.a1 {
  background: rgb(255 0 0 / 0.5);
  border: 5px solid red;
  grid-column: 1 / span 2;
}

.a2 {
  background: rgb(0 0 255 / 0.5);
  border: 5px solid blue;
  grid-row: 2 / span 2;
}

.a3 {
  background: rgba(0 255 0 / 0.5);
  border: 5px solid green;
}

.a4 {
  background: rgba(0 229 255 / 0.5);
  border: 5px solid rgb(0, 229, 255);
}

<div class="post-background">
<div class="post-area">

<div class="a1">
<h1>a1</h1>
</div>

<div class="a2">
<h1>a2</h1>
</div>

<div class="a3">
<h1>a3</h1>
</div>

<div class="a4">
<h1>a4</h1>
</div>

</div>
</div>