您好,我的浮动容器有一些困难,我有 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;
}