0

这是我正在使用的代码。

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

基本上，随着浏览器窗口的大小调整（变小）。我正在尝试强制 2 个 div（中间 2 列和中间 3 列）调整大小，直到中间 3 列的最小尺寸宽度达到 200 像素，中间 2 列达到 300 像素。

#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;
}

可以这么说，我正在使用 float 将它们对齐，但它给我带来了麻烦，右边的列正好在 LEFT SIDE 下方，我也想避免这种情况。

任何帮助将不胜感激。

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 回答