关闭

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

1363人阅读 评论(0) 收藏 举报
分类:

想写一个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的高度和宽度,不然就是显示的是一行。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:325247次
    • 积分:8907
    • 等级:
    • 排名:第2227名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论