问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于缩小浏览器窗口，浮动的div换行的问题。

头像
hehehe
    258106075

    IE：放大缩小浏览器页面，不变。
    firefox和google：缩小页面浮动的div换行。
    谢谢~~
    图片如下：
    1、IE缩小：
    图片描述
    2、火狐缩小：
    图片描述
    3、google缩小：
    图片描述
    代码：
    <!doctype html>
    <html lang="en">
    <head>

    <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
    margin:0px;
    padding:0px;
}
.main,div{
    width:1200px;
    margin:20px auto;
    /*position:relative;*/
    padding:0;
    border:1px solid red;
    overflow:hidden;
}
/*main左边布局*/
.mainleft{
    margin:0;
    padding:0;
    float:left;
    width:158px;
    height:348px;
    border:1px solid #B8D9E9;
}
/*main中间*/
.maincenter{
    margin:0 10px;
    padding:0;
    float:left;
    width:738px;
    height:348px;
    border:1px solid #B8D9E9;
}
/*mian右边*/
.mainright{
    margin:0;
    padding:0;
    float:left;
    width:278px;
    height:348px;
    border:1px solid #B8D9E9;
}

</style>

    </head>
    <body>

    <div class="main">
    <div class="mainleft">左</div>
    <div class="maincenter">中</div>
    <div class="mainright">右</div>
</div>

    </body>
    </html>

    csshtml
    阅读 9.9k
    3 个回答
    得票最新
    头像
    undefind_5
      1.5k1298133

      我给你看看我这里的效果吧：
      火狐

      clipboard.png

      google

      clipboard.png
      ,你要不把你的效果图截图出来？确实没问题啊

      头像
      四月的桜和猫
        3.3k53055

        测试了一下
        chrome：（版本：
        clipboard.png
        ）

        clipboard.png

        火狐：

        clipboard.png

        都没有问题
        如果按照你刚才评论的
        就是按crlt-的时候的话 确实有你说得 问题
        至于为什么我也不是很清楚
        解决办法有一个
        在你的代码中添加

        box-sizing：border-box

        具体IE中可以是因为这个属性本就是IE的 哈哈

        clipboard.png

        clipboard.png
        我已经试过了 完全可以

        头像
        hoohya
          21
          新手上路，请多包涵

          2020.7来回复一下这个问题，在升级了chrome到最新的版本（大约83版本）后，也发现自己正在做的网页有这个问题，firefox也有，就是原本不会换行的div变成了自动换行（css里指定了1200px宽，html里的class里设了fl，然后下载了绿色75版本的chrome做测试，发现，这个版本的就不会有自动换行的div的问题，绿色版放在一个目录里，打开会自动继承原来的chrome里的插件和收藏夹内容，所以我觉得可以2个同时用）
          （而firefox可能很早的版本就有这个问题了，我的firefox已经很久没升级了，在这里不讨论……）

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