0

ここに私が取り組んでいるコードがあります。

http://jsfiddle.net/qLjgM/2/

基本的には、ブラウザ ウィンドウのサイズが変更される (小さくなる) ためです。2 つの div (MIDDLE 2-COLUMN と MIDDLE 3-COLUMN) のサイズを、MIDDLE 3-COLUMN の最小サイズ幅が 200px、MIDDLE 2-COLUMN の 300px になるまで強制的に変更しようとしています。

#wrapper {
margin:0 auto;
width:100%;
max-width:500px;
}

#content-pad {
width:100%;
max-width:500px;
margin:0px;
background:#CCC;
font-size:12px;
}

#left-col {
float:left;
width:100px;
margin-top:12px;
background:#CCC;
}

#mid-col {
float:left;
width:100%;
min-width:200px;
max-width:270px;
margin-left:15px;
margin-top:12px;
background:#CCC;
}

#mid-col-wide {
float:left;
width:100%;
min-width:300px;
max-width:385px;
margin-left:15px;
margin-top:12px;
background:#CCC;
}

#right-col {
float:left;
width:100px;
margin-left:15px;
margin-top:12px;
background:#CCC;
}

いわばインラインで配置するためにフロートを使用していますが、右側の列が左側の下にスナップするだけで問題が発生するため、それも避けたいと思います。

どんな助けでも大歓迎です。

4

1 に答える 1

1

問題は、フロートに親の 100% の幅 (#content-pad) を与えていることです。これは、#left-col が占めるスペースを考慮に入れていないため、フロートが広すぎて、思いどおりにフローできません。フロートを少なくして、次のようなことを試してください。

http://jsfiddle.net/qLjgM/5/

#wrapper { margin:0 auto; width:100%; max-width:500px; }
#content-pad { margin:0px; overflow: auto; }
#left-col { float:left; width:100px; margin-top:12px; margin-right: 10px; }
#mid-col { min-width:200px; margin-left:15px; margin-top:12px; }
#mid-col-wide { min-width:300px; margin-left:15px; margin-top:12px; }
#right-col { float:right; width:100px; margin-left:15px; margin-top:12px; }

        <div id="wrapper">
            <div id="content-pad">
                <div id="left-col">LEFT SIDE
                    <br />
                    <br />
                    <br />
                </div><!-- //left-col -->

                <div id="mid-col-wide">MIDDLE 2-COLUMN</div><!-- //mid-col -->
                <div id="right-col">RIGHT SIDE</div><!-- //mid-col -->
                <div id="mid-col">MIDDLE 3-COLUMN</div><!-- //mid-col -->
            </div><!-- //content-pad -->
        </div><!-- //wrapper -->
于 2013-01-29T21:33:07.680 に答える