Html 集装箱不能正确浮动

我正在尝试做一件非常简单的事情，让一个容器与另一个容器的右侧对齐。由于某种原因，我真的很挣扎

我做了一个非常基本的小提琴来显示我正在努力做什么

我试着添加

display: inline;
float: right;

到

以及使其

内联块

和许多其他东西，但它没有对齐

我做错了什么？

在第一个容器中添加“float:left”

rankingTableOut {
    border: solid 1px #C0C0C0;
    border-radius: 8px;
    width: 60%;
    margin-left: 15px;
    padding-top: 25px;
    float: left;
}

---

您需要添加

display:inline块到
rankingtable out
类，而不是
top\u post\u out
。默认情况下，div是块元素，这会导致它们后面有换行符。因此，您的下一个元素浮动到下一行的右侧，而不是您想要的当前行的右侧。内联块属性将防止换行，同时保留元素的宽度和高度。
浮动元素需要在标记中定义为之前的，或开始时的应该“围绕它浮动”的内容。只需重新排序容器就可以解决问题，不需要额外的CSS

<div class="top_post_out">
    <p>Make me right</p>
</div> 
<div class="rankingTableOut">
    <p>Make me left</p>
</div>


让我说对

让我离开



您还应该阅读。
谢谢。真不敢相信我没有试过。这可能会有各种意想不到的副作用，而且不是正确的解决方案。你们都应该熟悉浮动的概念（有时很难）。
<div class="top_post_out">
    <p>Make me right</p>
</div> 
<div class="rankingTableOut">
    <p>Make me left</p>
</div>