html - Div 正在通过 CSS 占用它不应该占用的空间

Question

我目前正在尝试设置一个将出现在我网站上的帖子，其中包含早期的 CSS 以布置所有内容。我对所有内容进行了颜色编码，以便更容易看到发生了什么。您可以在此处看到它:https://jsfiddle.net/k3wpz49b/

我的问题是我有最后一个名为 details_wrapper 的 div，它应该位于红色部分所在的位置，但它一直向左移动。当我检查 chrome 时，它​​说它占用了整个空间。我不明白为什么会这样。

我的代码在这里:

<div class="post_wrapper">
<div class="profile_image">


</div>
<div class="body_wrapper">
    <div class="title">

    </div>
    <div class="description">

    </div>
</div>
<div class="details_wrapper">

</div>

    .post_wrapper{
    width: 800px;
    height: 150px;
    background-color: red;
}
.profile_image{
    width: 175px;
    height: 150px;
    background-color: black;
    float: left;
}
.body_wrapper{
    width: 475px;
    height: 150px;
    background-color: gray;
    float: left;
}
.title{
    height: 40px;
    width: 450px;
    margin: 10px;
    background-color: blue;
}
.description{
    height: 80px;
    width: 450px;
    margin: 10px;
    background-color: green;
}
.details_wrapper{
    height: 150px;
    width: 100px;
    background-color: purple;
}

Answer 1

您只需将 float: left 添加到 details_wrapper

https://jsfiddle.net/k3wpz49b/5/