日期:2014-05-17  浏览次数:20954 次

css使用float后,如果把浏览器界面缩小,则盒子飘到下面去了。
我弄个简单例子:
<head>
<style type="text/css">
/*自定义盒子的大小*/
div{
border:#999 solid 1px;
height:200px;
width:300px;}

#div_1{background-color:#0FF;
float:left;
}

#div_2{background-color:#F0F;
float:left;

}

#div_3{background-color:#FF0;

}

</style>
</head>

<body>
            <div id="div_1">第一个盒子</div>
            <div id="div_2">第二个盒子</div>
            <div id="div_3">第三个盒子</div>
</body>

如果将浏览器界面缩小,则二三两个盒子有飘到第一个盒子的下面去了,如何解决?
CSS 界面 HTML float 定位

------解决方案--------------------
<body>
   <html style="min-width:906px;overflow-x:auto;">
            <div id="div_1">第一个盒子</div>
            <div id="div_2">第二个盒子</div>
            <div id="div_3">第三个盒子</div>
   </html>
</body>