admin 管理员组

文章数量: 1184232

1：代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="css/css1.css" />-->
        <style type="text/css">
            .head {
                width: 100%;
                height: 100px;
                background: red;
                border: 1px solid black;
            }
            
            .head .content {
                width: 980px;
                height: 100px;
                margin: 0 auto;
                border: 1px solid white;
            }
        </style>
    </head>

    <body>
        <div class="wapper">
            <div class="head">
                <div class="content">

                </div>
            </div>
        </div>
    </body>

</html>

2：浏览器展示（全屏）

浏览器缩小时：

解决办法：给父级元素设置一个min-width；这样在浏览器缩小到子元素的宽度时就不会出现留白。

1：代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="css/css1.css" />-->
        <style type="text/css">
            .head {
                width: 100%;
                height: 100px;
                min-width: 980px;
                background: red;
                border: 1px solid black;
            }
            
            .head .content {
                width: 980px;
                height: 100px;
                margin: 0 auto;
                border: 1px solid white;
            }
        </style>
    </head>

    <body>
        <div class="wapper">
            <div class="head">
                <div class="content">

                </div>
            </div>
        </div>
    </body>

</html>

2：浏览器展示(全屏)

3:浏览器缩小时

 

 

本文标签： 元素 浏览器

版权声明：本文标题：如何使元素在浏览器缩小的时候不会出现留白？ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1766356269a3452120.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。