0

現在、私はナビゲーションに取り組んでおり、この問題に遭遇しました:

ナビゲーションの内容が左に浮きます。ナビゲーション自体の背景色を設定しようとすると、機能しません。この例を見てください：

http://cssdeck.com/labs/qknohqxe

float:left を削除すると、背景色が見えるようになりますが、ナビゲーションの「フォーム」は破壊されます。

フォームと背景色の両方が希望どおりに保持されるこの単純なポイントに到達しようとしているので、重要なポイントが欠けていると確信しています。

私の推測では、フローティング コンテンツとキャリアのサイズ (私の場合は #nav) の間には関係があると思います。

この問題の提案/回避策が必要です。

4

5 に答える 5

2

これを に追加.group:

overflow:auto;

それでおしまい。

別の解決策もありclear:both;ます。すべてのフローティング div の後に要素を追加することです。しかし、それはもう少し汚いです：

<div class="container">
    <div class="floating div"></div>
    <div class="floating div"></div>
    <div class="floating div"></div>
    <div style="clear:both;"></div>
</div>

フローティング div を使用すると、常に発生します。コンテナーは浮動要素を気にしないため、前述のソリューションのいずれかを使用しない限り、空のコンテナーのようになります。

于 2013-02-08T12:42:24.133 に答える
1

親コンテナ（あなたの場合）で、固定の高さ.groupを追加または設定します。overflow: auto

これは、フロートされた要素と絶対的に配置された要素がデフォルトでドキュメントフローから除外され、次の要素を配置するときに無視されるために発生します。

于 2013-02-08T12:43:18.387 に答える
0

これが作業中の CSS 宣言です。

.group{
    background-color: blue;
    float: left;
    width: 200px;
}

ネストされた要素のフローティングと配置を理解する必要があります。

于 2013-02-08T12:47:02.100 に答える
0

明確な両方を追加するだけです。余分な要素に:

<div id="nav">
    <div class="group">
        <div class="button">Button1</div>
        <div class="button">Button2</div>
        <div class="button small">Button3</div>
        <div class="button small">Button4</div>
        <div class="button">Button5</div>   
        <br class="clear" />
    </div>
</div>


#nav{
    width: 240px;
}

.button{
    float:left;
    border-radius: 20px;
    width: 200px;
    height: 50px;
    margin-top: 10px;
    background-color: red;
    text-align: center;
    line-height: 50px;
}

.group{
    background-color: blue;
}

.small{
    width: 100px;
}
.clear
{
    clear: both;
}
于 2013-02-08T12:47:24.143 に答える
0

に高さを追加します.group。

.group{
    height: 300px;
    background-color: blue;
}

オブジェクトをフロートすると、ドキュメント フローから除外されます。つまり、親オブジェクトは子要素の高さとは関係ありません。

高さを設定することで、コンテナを強制的に下げることができます。

または、コンテナーにオーバーフローを追加して、.group強制的に高さを探すようにすることもできます。

.group{
    overflow: hidden;
    background-color: blue;
}
于 2013-02-08T12:39:14.463 に答える