Question

如下所示，当窗口缩放时，如何避免浮动元素掉落？

web page screenshot

我尝试在容器上设置min-width，但IE7和FF对它的解释不同，并且列显示的宽度不同：

enter image description here

<body>

<div id="wrapper1">
<div id="header">
    <h1>This is the header</h1>
</div>
        <div id="maincol">
            <div id="leftcol">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p>
            </div>

            <div id="rightcol">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p>
            </div>

            <div id="centercol">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p>
            </div>
        </div>

        <div id="footer">
            <p>This is the footer</p>
        </div>
</div>

</body>

的CSS：

body {
    text-align:center;
    margin:20px;
    padding:0;
    font:normal 0.8em/1.2em verdana,aria,sans-serif;
    color:#666;
    }
#wrapper1 {
    position:relative;
    text-align:left;
    width:80%;
    margin:auto;
    }
#header {
    background:#BB62AB;
    padding:10px;
    margin:0;
    text-align:center;
    color:#FFF;
    }
#maincol {
    position:relative;
    margin:0;
    padding:10px;
    }
#leftcol { 
    position:relative;
    top:-10px;
    left:-10px;
    float:left;
    width:220px;  /* for IE5/WIN */
    width:22%; /* actual value */
    margin:0 0 -10px 0;
    padding:10px;
    background:#ECB9E8;
    z-index:100;
    }
#rightcol {
    position:relative;
    top:-10px;
    right:-10px;
    float:right;
    width:220px;  /* for IE5/WIN */
    width:22%; /* actual value */
    margin:0 0 -10px 0;
    padding:10px;
    background:#D7C4FA;
    z-index:99;
    }
#centercol {
    float: left;
    position:relative;
    padding:0 2px;
    width:50%;
    }

Answer 1

这是因为您在所有3个浮动容器中使用的padding。尝试删除填充，甚至更好地使用子容器中的padding。

<强> See the demo

我在p标记中包含了填充而不是父容器。现在所有3列都不会崩溃。

另一种方法是使用百分比宽度（或绝对值，如果您知道父级的宽度）到列并包括padding值，以便宽度的总和等于（或更小）比）100％。例如：

    #rightcol{width:23%; padding:0 1%} /*25%*/
    #leftcol{width:23%; padding:0 1%} /*25%*/
    #midcol{width:48%; padding:0 1%} /*50%*/

注意：如果您使用border，还应该在父级的总宽度中包含边框的宽度。即使您使用的是1px边框，也会使浮动元素崩溃。

Answer 2

使用填充仍然很好，但是你应该在宽度大小的计算中添加填充。

所以padding + col1 + padding + col2 + padding + col3 + padding = 100%

使用固定像素大小进行填充时，会在缩小窗口大小时使总计算值大于100％。

如果窗口小于1000px，

例如100px padding + 80% width + 100px padding将超过100％。

Answer 3

将#centercol id修改为此值（在使用IE9模式的firefox和IE10中测试）：

#centercol { margin: 0 auto; max-width: 50%; padding: 0 2px; position: relative;}

jsfiddle：http://jsfiddle.net/xzjHv/

防止浮动元素在窗口缩放时下降

3 个答案: