div 固定宽度,固定位置不变

想写一个demo,想固定div在某个位置,改变浏览器宽度的大小不会移动

 

<html>
	<head>
		<title>usually function</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>
		不会根据浏览器窗口大小变化
		<div style="display:block;width:500px;height:300px; border:1px solid red">
			
			<div style="display:block;width:200px;height:100px; border:1px solid red;float:left">11</div>
			
			<div style="display:block;width:200px;height:100px; border:1px solid red;float:right">22</div>
			
		</div>
		
		<br>
		<br>
		<br>
		会根据浏览器窗口的大小变化
		<div style="display:block;width:200px;height:100px; border:1px solid red;float:left">11</div>
			
		<div style="display:block;width:200px;height:100px; border:1px solid red;float:right">22</div>
		
	</body>
<html>

 

原理说明:

设置一个最外层的DIV作为block,固定其宽度和高度,然后里面添加多个DIV,以最外层的div作为标准,然后将子div一个向left和right浮动,他们的浮动是以其parent div作为参考的,由于最外层是固定的,那么里面的DIV就不会变化

 

强调:最外层的DIV 的样式一定要设置为“块”即display:block;这样一个才能设置DIV的高度和宽度,不然就是显示的是一行。

阅读更多
个人分类: css & css3
上一篇apache代理 访问跨域代码
下一篇利用java server代码解决跨域
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭