多个float的div元素,在浏览器缩小宽度时,显示为两列,为何不能显示为1列

我的问题是为什么最低是两列呢???麻烦各位解答一下,最近在看《Head First HTML&CSS》:

  1. 贴上效果先, 再向左或者向右缩小浏览器就不行了,最少是两列

clipboard.png

  1. 贴上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*我这里并没有给浮动元素指定width, 我知道这如果不指定width,元素的宽度会尽可能的窄*/
            .box {
                margin: 5px;
                float: left;        
                border: 1px solid green;
            }
        </style>
        
    </head>
    <body>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        <div class="box">
            我在浮動
        </div>
        
        
    </body>
</html>

环境
Chrome 版本 24.0.1312.57

阅读 3.6k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题