html - 在屏幕右侧显示多个框

Question

我目前正在为某人开发一个网站，在他们的“关于”页面上，他们希望在那里有一些推荐。他们希望每个小句子都显示在屏幕右侧的自己的框中。我已将他们要求的文本放在页面顶部，并在 block 中插入了引号。这是我遇到问题的地方。无论我做什么，无论是 float 还是显示，我都无法让框沿着页面的一侧垂直运行，每个框都显示在前一个框的下方。有人可以帮我完成这项工作吗？我试图 float block 无济于事。他们只是想堆在一起。这是代码:

HTML

<aside id="expert">
     <h2>Always a Satisfied Customer</h2>

    <ul class="b">
        <li>Upfront Pricing</li>
        <li>Affordable Rates</li>
        <li>Courteous and Respectful</li>
        <li>Always On Time</li>
    </ul>
</aside>

<aside id="refer">
    <p>I would recommend EJP to anyone and everyone! They showed up, looked at my issue, and fixed it promptly. They are simply the best!
        <br />-Tim S.</p>
</aside>

CSS

#expert {
    background-color: white;
    display: block;
    border: solid;
    float: right;
    right: 20px;
}
#refer {
    background-color: white;
    border: solid;
    float: right;
    width: 150px;
    display: block;
}

谢谢

Answer 1

你可以让它们像这样堆叠:

#refer {
    ...
    float: right;
    clear: right;
}

Demo