Question

这是我正在使用的代码。

基本上，随着浏览器窗口的调整大小（变小）。我试图强制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;
}

我正在使用浮动来将它们对齐内联可以这么说，但它让我在右边的列上遇到麻烦，只是在左侧下方捕捉，我也希望避免这种情况。

非常感谢任何帮助。

Answer 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 -->

如何在窗口调整大小时使特定DIV调整大小以获得响应式布局？

1 个答案: