0

コードは次のとおりです。

<div style="width:100%;height:200px;overflow:hidden;border:1px solid red;" id="container">
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner">
first div</div>
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner">
second div</div>
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner">
third div</div>
</div>​

画面の高さが 1200px よりも小さい場合、内部クラスを使用してその div を整列させるにはどうすればよいですか? 画面の高さが 1200px より小さい場合、そのコードは div を上下に表示します。

ありがとう

4

3 に答える 3

0

これは、内側の div の幅を width:400px でハードコーディングしたためです。

それらをパーセンテージに設定する必要があります...そしてできれば.innerクラスで。

.inner {
    float:left;
    width:33%;
    height:100px;
    border: 1px solid green;
}

縮小しすぎないようにする場合は、最小幅を .inner に追加し、それを @media クエリに関する bookcasey のコメントと組み合わせて、小さいサイズでより柔軟にすることもできます。

于 2012-10-23T19:48:05.047 に答える
0 
@media screen and (max-width: 1200px) {
   #container { width: 400px; height: 300px; }
}

メディア クエリを使用します。

Demo、インライン スタイルは外部 CSS をオーバーライドすることに注意してください。そのため、#containerスタイルを移動する必要がありました。

于 2012-10-23T19:46:02.437 に答える
0

追加することをお勧めします

position: relative;

外側の容器に - そして置く

position: absolute; left: 0; top: 0;

「内側」のコンテナに。その後、好きなようにサウンドをコントロールできます。「position: relative;」を入れることが重要です。内側のコンテナには絶対的なものが必要なので、外側のコンテナで...それが理にかなっている場合。お役に立てば幸いです。

于 2012-10-23T19:51:53.597 に答える