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

最新推荐文章于 2024-07-22 17:45:11 发布

Cykying

最新推荐文章于 2024-07-22 17:45:11 发布

阅读量3.6w

点赞数 3

分类专栏： HTML CSS WEB前端文章标签： css 浏览器 html div

本文链接：https://blog.youkuaiyun.com/u010869754/article/details/45395399

版权

WEB前端同时被 3 个专栏收录

8 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

文章解释了层div内元素在浏览器缩放时位置变化的原因，并提供解决方案，通过设置最外层div的margin为具体值而非百分比来避免此现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-size:24px;color:#000000;">有时候层div内元素会随着浏览器的缩放大小改变，内容位置会上下左右变化，其实是因为我们的边距设置问题。为了不让层div内容随着浏览器缩放而变化，我们应该设置最外层div的margin,比如左边距margin-left为一个具体的值px，而不能设置为百分比%，因为百分比是按浏览器的大小或者说父元素的大小来改变距离的，浏览器绽放影响了父元素的大小，因为div里面的内容形式会改变，下面用了一个很简单的例子演示了一下，我也是初学，做网页的时候碰到了，自己研究了一下<img alt="吐舌头" src="http://static.blog.youkuaiyun.com/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="https://img-blog.youkuaiyun.com/20150430160046561?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.youkuaiyun.com/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.youkuaiyun.com/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.youkuaiyun.com/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.youkuaiyun.com/20150430160246322?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>

<img src="https://img-blog.youkuaiyun.com/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>