HTML5 解决窗口随着页面调整而浮动的问题

最新推荐文章于 2024-03-12 11:17:49 发布

十指流玉

最新推荐文章于 2024-03-12 11:17:49 发布

阅读量1.6k

点赞数 1

文章标签： HTML

本文链接：https://blog.csdn.net/qq_41886231/article/details/99438709

版权

在设计页面的时候发现，页面中的元素会随着页面的调整而移动。

功能实现：在一个页面中定义了三个界面框。

调整前：

调整后：

这样调整以后效果好多了。

实现代码：（可能还有改进的地方，但是起码问题解决了，另外其中最主要的原因是将body标签设置了宽度、高度，能够将三个盒子包围，使其构成一个整体，当然也不必非要将body 设置成一个整体，不必将div设置成固定显示格式，可以上通过设置ID实现，大家可以自行探索一下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子模型测试</title>
    <style class="text/css">
    div{
        display:inline-block;
        height: 200px;
        width:300px;
        border: solid 5px red;
        margin: 4px;
    }
   body{
        width:1050px;
        height:220px; 
        border:none; 
    }
    div{
        float: left;
    }
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div> 
</body>
</html>

十指流玉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 解决窗口随着页面调整而浮动的问题

在设计页面的时候发现，页面中的元素会随着页面的调整而移动。功能实现：在一个页面中定义了三个界面框。调整前：调整后：这样调整以后效果好多了。实现代码：（可能还有改进的地方，但是起码问题解决了，另外其中最主要的原因是将body标签设置了宽度、高度，能够将三个盒子包围，使其构成一个整体，当然也不必非要将body 设置成一个整体，不必将div设置成固定显示格式，可以上通过设...
复制链接

扫一扫