9

我正在尝试在我的网站的主容器中创建一个元素容器。为了使元素容器排成一行，我float:left;对它们进行了应用。但是当我添加float到它们时，主容器缩小了！我尝试应用clear:both到主容器，但没有任何变化。

CSS：

#main_container
{
    clear:both;
    margin-top:20px;
    padding:20px 10px 30px 15px;
    background:#ccc;
}
.element_container
{
    float:left;
    width:238px;
    height:300px;
    border:1px solid #000;
}

HTML：

<div id="main_container">

    <div class="element_container"></div>

    <div class="element_container"></div>

    <div class="element_container"></div>

</div>

在此处输入图像描述

4

4 回答 4

12

尝试添加：

overflow: auto;

到#main_container

编辑：作为另一种浮动清除方法，您可以使用 :after，如此处所述。

于 2012-07-16T06:16:18.927 回答
1

添加overflow: hidden;到主容器 -

#main_container
{
    clear:both;
    margin-top:20px;
    padding:20px 10px 30px 15px;
    background:#ccc;
    overflow: hidden;
}
于 2012-07-16T06:17:03.853 回答
0

尝试将 div 的宽度设置为 100%。也许这会有所帮助。

于 2012-07-16T06:17:14.003 回答
0

嗨，现在这个解决方案的两个选项现在执行此操作

首先是

<div id="main_container">

    <div class="element_container"></div>

    <div class="element_container"></div>

    <div class="element_container"></div>
  <div class="" style="clear:both;"></div> //  add this in your html 
</div>

现在第二个是定义你的主容器Overflow

#main_container{
overflow:hidden;
}
于 2012-07-16T06:35:46.073 回答