网页布局的排版错乱
开发工具与关键技术：DW的自适应电脑分辨率
作者：周欢
撰写时间：2019/1/17
对于一个菜鸟码农，做出属于自己的第一个网页心里开始激动啦。可当自己的网页显示到他人的电脑上自己原有的布局一片混乱，为什么会出现这样的状况呢？
接下来让我们来分析分析，明人不说暗话，直接上图O(∩_∩)O~
如下是在自己电脑上的布局效果，见截图
在截图中我们看到，布局效果看着还是阔以滴喔(#.#)
接下来再让我们看看同一个网页在宁一台电脑上的效果，见截图
在截图中我们可以明显的看出布局混乱了，箭头所指向的位置偏离了原有的轨迹，失去了整体居中的效果
那么问题来了我们该如何解决这一问题咧⁉
其实也不难，以下是我提议的两种方案
第一种解决方案：（蓝色箭头的解决方案）给蓝色箭头的div加上margin：0 auto；样式
（红色箭头的解决方案）用一个大的div把红色箭头所指的div与宁外两个div包裹着，再给这个大的div添加margin：0 auto；样式
第二种解决方案：给头部以下用div包裹（截图红色部分可以想象红色框就是那个div），在给其添加margin：0 auto；样式
这样我们的布局可在任意电脑上就会自适应啦。
温馨提示：
1、 在我们设计页面布局的时候尽可能的不要使用定位（position属性）来实现，使用定位很容易出现我们今天所讲的状况
2、 考虑各个电脑的分辨率不一致（第三点可以解决分辨率问题）
3、 在页面布局完成后我们可以使用放大、缩小功能自我模拟页面在不同电脑上的效果（按下Ctr键滚动鼠标，向上滚动为放大功能，向下滚动则为缩小功能）
因为我自己出现过这种情况，所以这是对自己的一个小总结，同时希望这个可以帮助到因为同样问题而苦恼的同仁。
如有疑问可在评论区留言，或者广大网友有其他更好的方案也可以在评论区留言，欢迎积极留言，我会时时关注动态
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
