0

私のcssレイアウトの一部は、幅に対するdivの高さを設定して、アスペクト比がすべての画面サイズで同じになるようにします。このように、div の高さを px 値に具体的に設定することはありません。高さは単に幅の縦横比です。以前にこの手法に出くわしたことがない場合は、ここに良い説明があります。

私の特定の問題に...

これを念頭に置いて、高さの 2 倍の幅の次の単純な div を作成しました: (実際の動作を確認するには、このフィドルを参照してください)

<html>
    <head>
       <style type="text/css">
.container
{
    position:relative;
    width:50%;/*half the width of the whole page*/
    margin:auto;/*center the whole thing*/
}
.relative_container
{
    background-color:blue;
    position:absolute;
    width:100%;
    top:0;
    left:0;
}
.set_height
{
    width:100%;
    height:100%;
    margin-top:50%;/*aspect ratio 2:1*/
}
       </style>
    </head>
    <body>
        <div class='container'>
            <div class='relative_container'>
                <div class='set_height'></div>
            </div>
        </div>
    </body>
</html>

これまでのところすべて良い。ただし、最初の div の下に別の同一の div を追加したいと考えています。このフィドルでわかるように、それらを互いに重ねる以外の方法で表示することはできません。答えは間違いなく、ここで示されているようにdivをクリアすることにありますが、わかりません。

4

2 に答える 2

2

あなたのrelative_containerクラスは絶対的に配置されているので、両方の div を同じ幅と高さで top:0, left:0 に配置しています (したがって、それらは互いに重なっています)。これはあなたがしていることには意味がありません。

ポジショニングを相対に変更float: leftし、奇妙な名前relative_containerの に追加すると、親 div の可能な限り左端に「浮かぶ」ため、目的の動作が得られます。

また、「クリア」な div は何もしていません。clear プロパティは、指定された div の右/左にフロートしないように他の div に指示します。div の幅が 100% の場合 (つまり、親を埋めている場合)、その横には何もフロートできません。

例 1: http://jsfiddle.net/NKRPe/13/

編集: この 2 番目の例では、ダミーの div を使用せずに同じタスクを実行します。padding-topまたは のいずれかpadding-bottomを使用できることに注意してください。

于 2013-02-03T10:27:34.217 に答える
1

.container に追加:

padding:25% 0 0;
于 2013-02-03T10:31:40.843 に答える