0

ページに、このルールでスタイル設定されたラッパーがあります

#wrapper{
    width: 900px;
    margin: 0 auto;
    background: #FFF;
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}

問題は、子がフロートされている場合、ラッパーが成長しないことです。少しグーグルした後、display:noneを追加すると解決することがわかりました。そしてそれはしましたが、要素の一部がラッパーをオーバーフローする必要があるため、それはできません(ラッパーから突き出ているデザイン要素)。overflow:hidden を使用せずに解決するにはどうすればよいですか?

4

2 に答える 2

2

これは、フロートを操作する際によくある問題です。一般的な解決策がいくつかあります。

  1. float の後に div を追加しclear: bothます。例。

    <div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>

  2. CSS 属性を使用して、2 つのフロートをコンテナーに追加しますoverflow: auto。例。

    <div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  3. 親要素を float にします。例。

    <div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  4. :after CSS 疑似要素を使用します。例。

    .parentelement:after {
    content: ".";
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
}

  5. 親要素に設定された高さを追加します。例。

    <div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

個人的には、単純さとセマンティクスのためにオプション 2 を使用します。

于 2012-06-06T12:02:23.813 に答える
2

フロート要素をクリアする必要があります。

<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
于 2012-06-06T12:02:38.977 に答える