1

このコード:

  <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>

このcssでコーディングされています：

   #columns {
        width: 200px;
        float: left;
        margin-left: 20px;
        margin-right: 20px;
    }

問題は、作成した 3 つの列の下にテキストを配置すると、別の列が追加されることです。フッターをこれらの列の下に配置したいのですが、これを設定することによってのみこれを行うことができます:

footer {
    /*height: 50px;*/
    text-align: center;
    position:absolute;
    bottom:0;
}

そして、これはページを長くするだけです。つまり、このコンテンツとフッターの間に大きなギャップができます。解決策はありますか？

ありがとう

4

6 に答える 6

2

要素が左にフロートされ、ドキュメント フローが変更されます。フッターを書き込む直前に、ドキュメント フローをリセットする必要があります。フッターのプロパティを設定することで実行できますclear:both（実際には終了した直後.columns）。

動作中のjsfiddleはこちらです。

CSS:

footer{
    clear: both;
}

提案 (質問の範囲外):有効な html マークアップのように変更id="columns"する必要があります。ID は一意である必要があります。class="columns"(ありがとうマイケル)

于 2013-09-17T05:46:23.977 に答える
0
文章 
<div id="columns">
    text
</div>
<div id="columns">
    text
</div>

<div style="clear:both"></div>
<footer>footer</footer>

于 2013-09-17T05:55:24.453 に答える
0

これを試して

デモ

CSS

   *{
        margin:0;
        padding:0;
    }
    #columns {
            width: 200px;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
        background-color:red;


        }
    .clearfix{
        clear:both;
    }
    footer {
        /*height: 50px;*/
        text-align: center;
        position:absolute;  
        border:1px solid red;
    }

html

<div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
<div class="clearfix"></div>
<footer>footer</footer>
于 2013-09-17T05:43:01.943 に答える
0

問題にはcss clearを使用する必要があります

あなたの id/class のようclear :bothに div

于 2013-09-17T05:45:26.630 に答える
0

フローティング アイテムを使用する場合、デフォルトの動作では、その領域内の他のコンテンツにカウントされないため、他のコンテンツの片側に表示されます。

もちろん、それを防ぎたい場合は、clearプロパティは基本的に、その前の片側 (またはどちらか) のフロート アイテムの下に続きます。

footer {
    height: 50px;
    clear: both; /* can also use `clear: left` here */
}
于 2013-09-17T05:44:10.310 に答える
0

削除してから試しbottom:0;て、3列目の後のhtmlコードの下に置いてください

<div id='footer'>
   <p>Footer Content</p>
</div>
于 2013-09-17T05:44:24.720 に答える