0

1つのDIV内に2つのDIVがあります。DIVの1つは左にフロートしているため、もう1つのDIVは外側のウィンドウを埋めることになります。外側のDIVを拡大または縮小する場合は、どのような場合でも、内側のDIVが外側のDIVを埋めるようにします。
サンプルコード：

<div id="main_container">
    <div id="left_container"></div>
    <div id="right_container"></div>
</div>​

およびCSSルールは

#main_container {
    border: 1px ridge blue;
    overflow: hidden;
    height: 93%;
}

#left_container{
    margin: 10px;
    height: 100px;
    border: 1px solid red;
    float: left;
    overflow: hidden;
    min-width: 200px;
}

#right_container{
    margin: 10px;
    height: 100px;
    border: 1px solid magenta;
    min-width: 200px;
    overflow: hidden;
}

</ p>

これがjsfiddleコードです。

HTMLウィンドウをサイズ変更すると、もう一方が下部にあるときに、一方が塗りつぶされていないことがわかります。

編集：明確にするために、私は画像を追加しました

これで結構です

これはOKではありません

4

3 に答える 3

1 
@media screen and (max-width: 441px) {
    #left_container{
        float: none;
    }
}

441px単なる例（2つのブロックmin-width+サイドmargins+1 border）。

于 2012-12-05T15:59:18.350 に答える
0

追加

width: 98%;

（必要に応じて調整してください）

#left_containerと#right_containerへ

于 2012-12-05T15:47:53.780 に答える
0

min-widthメインのdivに与えます。

#main_container {
    border: 1px ridge blue;
    overflow: hidden;
    height: 93%;
    min-width: 400px;
}
于 2012-12-05T15:49:17.523 に答える