0

ここに画像の説明を入力ここに画像の説明を入力子 divに適用float:leftすると、親 div が自動的に圧縮されます。以下のCSSコードを書いています：

 #footer_wrapper
{
    clear:both;
    background:#f0f0f0; 
    padding:15px 10px 10px 14px;
    border-top:1px solid #dcdcdc;
}
.footer
{
    width:950px;
    margin:0 auto;

}

.services
{
    float:left;
    width:250px;
}

HTML コード :

<div id="footer_wrapper">

    <div class="footer">

        <div class="services">
        <h2>Our Services</h2>
            <ul>
                <li><a href="#">7sisters Online Magazine </a></li>
                <li><a href="#">7sisters Business Deals  </a></li>
                <li><a href="#">7sisters Yellow Pages </a></li>
                <li><a href="#">7sisters Air Tickets </a></li>
                <li><a href="#"> 7sisters Jobs </a></li>
                <li><a href="#"> 7sisters Career </a></li>
            </ul>
        </div>    

    </div>


</div>

float:leftクラスから削除するとservices、背景がいっぱいに表示されます。私を助けてください。理由が見つかりません。ここに画像の説明を入力

4

2 に答える 2

1

プロパティoverflow:hiddenを親に渡すか<div style="clear:both"></div>、最後の子の後に a を置きます。

float を持つ要素はドキュメントの流れから離れます。この 2 つのメソッドを使用すると、フロート要素がフローにとどまるようにコンテナが作動します。

clear メソッドは完璧です。方法を教えてくれました。「float css をクリアする」を検索する場合 ... ここでは、たとえば

于 2012-10-13T05:37:14.740 に答える
1

このスタイル コードを使用できます。

    #footer_wrapper
{
    background:#f0f0f0; 
    padding:15px 10px 10px 14px;
    border-top:1px solid #dcdcdc;
    float:left;
}
.footer
{
    width:950px;
    margin:0 auto;

}

.services
{
    float:left;
    width:250px;
}
.services ul li, .services h2
{
    float:left;
    width:100%;
}
于 2012-10-13T06:13:48.317 に答える