Question

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

我做了一个非常基本的小提琴来展示我想要做的事情。

我尝试过添加

display: inline;
float: right;

到

.top_post_out {
    border: solid 1px #C0C0C0;
    border-radius: 8px;
    width: 30%;
    margin-right: 25px;
    padding-top: 25px;
}

除了制作inline-block以及许多其他内容外，还没有排队。

我做错了什么？

Answer 1

https://jsfiddle.net/Lvoy1dtd/2/

将“float：left”添加到您的第一个容器

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

Answer 2

您需要将display:inline-block;添加到rankingTableOut课程而不是top_post_out。 Div是默认的块元素，这会导致它们之后有换行符。因此，您的下一个元素将浮动到 next 行的右侧，而不是您想要的当前行的右侧。 inline-block属性将阻止换行，同时保留元素的宽度和高度。

Answer 3

浮动元素需要在您的标记中在之前定义，或者在之后定义的内容应该在其周围浮动＆＃34; 。只需重新排序容器即可解决您的问题，无需额外的CSS。

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

https://jsfiddle.net/Lvoy1dtd/3/

您还应该阅读Understanding floats。

容器不会向右浮动

3 个答案: