求助：如何将两个div放置在另一个div的右侧

要实现a2左侧、a3和a4在右侧上下排列的效果，你可以通过Flexbox布局调整结构，具体实现如下：

修改思路 #

1. 新增容器包裹a3和a4，让它们在容器内垂直排列
2. 用外层容器将a2与右侧包裹容器横向布局，实现左右分栏

完整代码 #

CSS代码

.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);
    border: 5px solid purple;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.a1 {
    text-align: center;
    height: 75px;
    background: rgba(255, 0, 0, 0.5);
    border: 5px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content {
    display: flex;
    gap: 8%;
    flex: 1;
}

.a2 {
    text-align: center;
    width: 70%;
    background: rgba(0, 0, 255, 0.5);
    border: 5px solid blue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-container {
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.a3 {
    text-align: center;
    height: 75px;
    background: rgba(0, 255, 0, 0.5);
    border: 5px solid green;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a4 {
    text-align: center;
    height: 75px;
    background: rgba(0, 229, 255, 0.5);
    border: 5px solid rgb(0, 229, 255);
    display: flex;
    align-items: center;
    justify-content: center;
}

HTML代码

<div class="post-background">
    <div class="post-area">
        <div class="a1">
            <h1>a1</h1>
        </div>
        <div class="main-content">
            <div class="a2">
                <h1>a2</h1>
            </div>
            <div class="right-container">
                <div class="a3">
                    <h1>a3</h1>
                </div>
                <div class="a4">
                    <h1>a4</h1>
                </div>
            </div>
        </div>
    </div>
</div>

修改后，a2会占据左侧70%宽度，a3和a4在右侧20%宽度的容器内垂直排列，完全匹配预期布局。

内容的提问来源于stack exchange，提问作者Alex i