0

您好,我的浮动容器有一些困难,我有 2 个容器,1 个左和 1 个右。左边的容器向左浮动。但是,如果左容器是 200 像素,那么右容器也不应该调整为 200 像素,因为它显然是一个浮动元素。但是在我的情况下它会调整,我不知道如何解决这个问题。在此处输入图像描述

蓝色容器是包装器,然后您有 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;
}
4

2 回答 2

0

这个链接应该有助于它作为演示相同场景的示例。但是,只需将浮点数应用于两个元素即可解决您的问题。

于 2013-09-20T11:00:23.140 回答
0

我发现并解决了这个问题,父元素有一个 cleafix,因此它使右容器与左容器具有相同的高度 + 它的内容。删除 clearfix 并添加 clear:left 在正确的位置解决了我的问题

于 2013-09-21T09:29:17.750 回答