Css float 问题

Question

您好，我在使用 float 容器时遇到了一些困难，我有 2 个容器，1 个左侧，1 个右侧。左边的容器向左浮动。但是，如果左侧容器为 200px，则右侧容器也不应调整为 200px，因为显然它是一个 float 元素。但是在我的情况下它会调整，我不知道如何解决。

蓝色容器是包装器，然后您有 2 个红色容器，但是您可以看到右侧容器正在将其高度调整到左侧容器，这是不应该的。

我正在使用的一些代码:

<div class="mcsf_posts">
            {% for post in posts %}
            <div class="mcsf_post">
                <div class="mcsf_post_author">
                    <div class="mcsf_post_author_image">
                        <img src="{{ asset('/bundles/maximcms/images/blank.gif') }}" data-src="http://minotar.net/avatar/{{ post.createdBy.username }}/45.png" alt="mc the mass logo"/>
                        <noscript>
                            <img src="http://minotar.net/avatar/{{ thread.createdBy.username }}/45.png" rel="tooltip" data-original-title="{{ post.createdBy.username }}" alt="{{ post.createdBy.username }}">
                        </noscript>
                    </div>
                    <div class="mcsf_post_author_info">
                        <p class="mcsf_post_author_name">{{ post.createdBy.username }}</p>
                        <p class="mcsf_post_author_title">Moderator</p>
                    </div>
                </div>
                <div class="mcsf_post_content">
                    <div>
                        {{ post.text|raw }}
                    </div>
                    <div class="mcsf_post_content_lowerbar">
                        <span class="mcsf_post_createdOn">{{ post.createdOn|date('M j \, Y H:i:s') }}</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

CSS:

.mcsf_post {

}
.mcsf_post + .mcsf_post {
    margin-top:10px;
}
.mcsf_post_author {
    float: left;
    width: 120px;
    border: 1px solid #DDD;
    background: white;
    border-radius: 5px;
    padding: 10px;
}
.mcsf_post_content{
    margin-left: 131px;
    border: 1px solid #DADADA;
    height: auto!important;
    background: white;
    border-radius: 5px;
    padding: 10px;
}

Answer 1

这个link作为演示相同场景的示例应该会有所帮助。但是，只需将 float 应用于两个元素就可以解决您的问题。