html - 为什么这段代码会导致 div 并排而不是垂直列？

Question

我试图在页面右侧浮动两个 div 以便它们堆叠：

<div style=" float: right;">
    <div style="padding: 10px; background-color: #2835d0;; color: white; border-radius: 10px;">
        test1
    </div>
</div>


<div style=" float: right;">
    <div style="padding: 10px; background-color: #2835d0;; color: white; border-radius: 10px;">
        test2
    </div>
</div>

标签： htmlcss

Answer 1

你是这个意思吗？

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

<div class="text-container">
    <div>
        <div style="padding: 10px; background-color: #2835d0;; color: white; border-radius: 10px;">
            test1
        </div>
    </div>
    <div>
        <div style="padding: 10px; background-color: #2835d0;; color: white; border-radius: 10px;">
            test2
        </div>
    </div>
</div>