0

私はこの同じ問題に何度も遭遇し続けています.float要素を含む流動的なdivには背景がありません(「高さがない」ため)。私は :after セレクター、 、さらには偽の高さを作ってみました。しかし、これらのソリューションはいずれも洗練されていたり一貫したものではありません。これに対処するための、最も適応性が高く、最も柔軟な方法を知りたいです。何度も再利用でき、二度と心配する必要がない「これがプロのやり方」の解決策を探しています。

これは、非常に単純な jsFiddle です。リストの背景はオレンジ色にする必要があります。 http://jsfiddle.net/y4Va3/

jsFiddle からのコード:

.wrapper {background-color: blue; width: 100%;}
.content {background-color: orange; width: 50%; margin: 0 auto;}
.bottom {background-color: green; width: 100%; clear: both;}
ul {margin: 0px 10px; padding: 0; float: left;}
li {list-style-type: none;}

<div class="wrapper">
    <div class="content">
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
    <div class="bottom">
        Not much here
    </div>
</div>

御時間ありがとうございます。

4

8 に答える 8

1

あなたがしなければならないのは、clearfixを追加することだけです

http://jsfiddle.net/cancerian73/yECkB/

.clearfix {
display: block; clear:both;

}

于 2013-08-01T13:42:30.763 に答える
1

ほとんどの人が言っoverflow: hiddenているように、折りたたみ要素が必要な高さになるようにするための推奨される方法です。ここにいい説明があります：

次のプロパティと値の組み合わせにより、要素は新しいブロック フォーマット コンテキストを確立します。

float: left and float: right 
display: inline-block, display:
inline-table, display: table-cell and display: table-caption 
position: absolute and position: fixed 
overflow: hidden, overflow: auto and overflow: scroll 
  and their overflow-x and overflow-y counterparts.

新しい BFC を確立するために、overflow: hidden (または overflow: auto) が一般的に使用される理由を理解するのは難しくありません。他のすべてのオプションには、しばしば非常に望ましくない副作用があるか、Internet Explorer 7 以前ではサポートされていません。

したがって、理論的には、上記のいずれかを使用して、親要素がその中に他の要素があることを認識していることを確認することができます (ただし、それらのすべてに新しい BFC を作成するという副作用があることに注意してください。リストされたプロパティのうち、明らかにまったく異なるものです）。

overflow: hidden何らかの理由で追加できない場合 (たとえば、ホバー時に表示されるメニューが親の外側にまたがる場合など) によく使用するトリックは、親要素もフロートさせることです。あなたの場合、次のように：

.content {
    background-color: orange;
    width:50%;
    margin: 0;
    float: left;
}

もちろん、これはあなたのセンタリングを壊し、この特定のケースには適していません. ただし、オーバーフローを隠したくない場合は、覚えておくとよいでしょう。width: 100%次に、フローティング親要素がブロックレベルの構造を模倣していることを確認するための適切な手段を追加することもできます:)

于 2013-08-01T11:02:46.557 に答える
1

このようにあなたを定義してください.content overflow:hidden 

.content {
overflow:hidden;
}

デモ

=========

オプション番号 2 

.content:after{content:"";
overflow:hidden;
    clear:both;
    display:table;
}

デモ2

于 2013-08-01T05:29:42.323 に答える