9

Web サイトのメイン コンテナ内に要素コンテナを作成しようとしています。要素コンテナを一列に並べるために、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

こんにちは、このソリューションの2つのオプションがこれを行います

最初は

<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 に答える