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

原创 2013年12月04日 10:28:55

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

HTML 固定div于页面固定位置,实现悬浮按钮。

一个小需求,页面过长,业务希望将按钮悬浮于页面上,不要一下拉就盖掉操作按钮。...

Div固定在屏幕右边的指定位置

#divCollapse {     display:none;     bottom: 40px;     right: 3px;             /*举例右边3像素*/     ...

关于3个div,一个固定大小,两个自定义。方法

关于3个div,一个固定大小,两个自定义。 1 3

怎么让多个div横向并排,前面的div都固定宽度,最后一个div自动计算宽度

可以把这些div放在一个父div中,overflow设置成hidden。里面横向并排的div可以使用float:left,最后一个不设置,width设置为auto,同时把margin-left设置成前...

三个div 两边固定大小中间自动大小

最近做公司一个项目,涉及到手机呈现页面,当时有个需求就是实现一个列表展示功能,左边是图片,中间标题文字介绍啥的,右边是操作按钮,想想很简单嘛,一分析搞三个div排一下,两边的固定宽度,中间的自动宽度,...

HTML <div>标签 内容超出div固定高度,超出部分隐藏

如果想将超出div高度和宽度的内容隐藏就用overflow:hidden; 如果想让超出的内容显示而div宽高不变,用overflow:auto; 在原来的div宽高基础上出现滚动条; overflo...

div浮层,滚动条移动,保持位置不变的4种方法

div在顶部不变、滚动条滚动,div还是在顶部! 直接上传源码 了: 方法一: div浮层,滚动条移动,保持位置不变 body{background-image:url...

div位置大小不随浏览器变化而变化

#main-content {                 margin: 0 30px 0 260px;                 padding: 40px 0 0 0;     ...

如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 (转)

这里稍微总结一下,那就是利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以...

JAVA实现图片上传自定义等比尺寸

做了五、六年电子商务开发,电商的商品图片非常的庞大,比如商品的预览图片,最少起码有三种格式,40x40,160x160,250x250,所以很多时候需要对商品图片进行处理,总结下电子商务的图片的储存。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div 固定宽度,固定位置不变
举报原因:
原因补充:

(最多只允许输入30个字)