オーバーフローを使用してネストされた Div で可変幅の分散を実現する方法: 非表示?

ネストされた Div で可変幅の分散を実現する方法

xHTML/CSS では、複数のネストされた div が必要なシナリオに遭遇するのが一般的です。内側の div の幅は内容に応じて変化し、水平方向に整列します。この質問は、一般的な課題、つまり、幅が指定されておらず、コンテンツに依存する場合に、残りの利用可能な水平方向のスペースを内部 div の 1 つにどのように割り当てるかという問題について探ります。

この効果を達成するには、CSS プロパティを利用できます。 「オーバーフロー: 非表示;」。このプロパティは、フローティング要素に隣接する要素がフロートの背後に拡張することを防ぎ、制御されたレイアウトを作成します。

以下の HTML 構造を考慮してください。

<div>

レイアウトを構成するには、次の CSS を使用できます。適用:

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

「overflow: hidden;」を設定することにより「outer」div では、フローティングされた「inner1」 div が「outer」 div 内に含まれたままになるように強制します。次に、「inner2」 div が残りの水平方向のスペースを埋めます。

このレイアウトが Internet Explorer の古いバージョン (IE 6 および 7) で動作することを確認するには、HTML 条件付きコメントで次の追加 CSS を使用できます。

<!--[if lte IE 6]>
<style type="text/css">
    #inner2 {
        zoom: 1;
    }

    #inner1 {
        margin-right: -3px;
    }
</style>
<![endif]-->

このスタイルは、IE 6 で「inner2」 div が残りのスペースを正しく埋め、「zoom」プロパティによって生じたギャップを補うために「inner1」 div のマージンを調整することを保証します。

この設定では、「inner1」 div はそのコンテンツに基づいて幅を動的に調整し、「inner2」 div は残りの利用可能な幅を占め、div がそれぞれの幅で水平方向に整列するレイアウトを作成します。

以上がオーバーフローを使用してネストされた Div で可変幅の分散を実現する方法: 非表示?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。