div+css如何让页面随着窗口的变化内容位置不变

来源：互联网发布：js的继承编辑：程序博客网时间：2024/06/08 15:21

<span style="font-size:24px;color:#000000;">有时候层div内元素会随着浏览器的缩放大小改变，内容位置会上下左右变化，其实是因为我们的边距设置问题。为了不让层div内容随着浏览器缩放而变化，我们应该设置最外层div的margin,比如左边距margin-left为一个具体的值px，而不能设置为百分比%，因为百分比是按浏览器的大小或者说父元素的大小来改变距离的，浏览器绽放影响了父元素的大小，因为div里面的内容形式会改变，下面用了一个很简单的例子演示了一下，我也是初学，做网页的时候碰到了，自己研究了一下<img alt="吐舌头" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/tongue.gif" />。</span>

<span style="font-size:24px;color:#ff0000;"></span>

<span style="font-size:24px;color:#ff0000;">你们可以将代码复制过去自己对比演示一下</span>

<span style="font-size:24px;color:#ff0000;">边距设置为百分比的时候的图对比展示,我改变的是div11,你们最好改变一下div21,div22,div23</span>

</pre><pre class="html" name="code"><span style="font-size:24px;color:#ff0000;">边距分别设置为百分比、具体值px时候的图例对比展示</span>

<span style="font-size:24px;color:#ff0000;"><img src="http://img.blog.csdn.net/20150430160046561?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160246322?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>

<img src="http://img.blog.csdn.net/20150430155826192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

</pre><pre class="html" name="code">

源码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test div</title></head><style>body{width: 100% auto;margin:0;}#div1{background-color: grey;width: 100% auto;height: 800px;}#div11{margin-left: 100px;float: left;border: solid 1px; height: 50px;width: 50px;}#div12{margin-left: 400px;border: solid 1px; height: 250px;width: 350px;}#div21{margin-left: 10%;float: left;/*clear: both;*/border: solid 1px; height: 50px;width: 50px;}#div22{margin-left: 10%;float: left;border: solid 1px; height: 50px;width: 50px;}#div23{margin-left: 10%;float: left;clear: both;border: solid 1px; height: 50px;width: 50px;}#div24{margin-left:10%;float: left;border: solid 1px; height: 50px;width: 50px;}#div13{margin-left: 100px;border: solid 1px;width: 100% auto;height: 40px;}</style><body><div id="div1"><div id="div11">div11</div><div id="div12"><div id="div21">div21</div><div id="div22">div22</div><div id="div23">div23</div><div id="div24">div24</div></div><div id="div13">div13</div></div></body></html>

0 0