div是块状元素。所谓块状元素,就是默认一行只能有一个,不管这行后面有没有剩余的位置,第二个都会放到第二行。
一般让两个div放到一行的方法是做如下定义
#div1{display:inline; float:left;}
其中,display:inline表示将其转换为内联元素,然后一行就可以放置多个了。float:left表示向左漂,所有的元素都会依次飘在左上方。
如果就是不想用float,能不能把两个块状元素放到一行呢?答案是可以的。
为了实现这个效果,就要借助position标签的力量了。
position标签属性多多,这是每个值的作用。
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
现在我希望先放一个大的div框框,并且把它放在屏幕中央,然后在它里面画四格小框框。每个小框和大框的边距是50px,小框之间的间距也是50px。
absolute是个不错的值,可是它不能实现位置随着浏览器窗口改变而改变的效果。
于是我的眼珠滴溜溜的转到了relative上面。大家猜猜top,left都需要设置成多少,才能把四个小框框的位置排出来呢?反正我是没猜对……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>为什么一定要加float标签呢</title>
<style type="text/css">
body, div{margin:0; padding:0}
#out{height:550px; width:750px; margin:0 auto; background:#ddd;}
#lefttop{position:relative; top:50px; left:50px; width:300px; height:200px; border:dashed 1px #0000FF;}
#righttop{position:relative; top:-150px; left:400px; width:300px; height:200px; border:dashed 1px #00FF00;}
#leftbottom{position:relative; top:-100px; left:50px; width:300px; height:200px; border:dashed 1px #FF9900;}
#rightbottom{position:relative; top:-300px; left:400px; width:300px; height:200px; border:dashed 1px #9900FF;}
</style>
</head>
<body>
<div id="out">
<div id="lefttop"></div>
<div id="righttop"></div>
<div id="leftbottom"></div>
<div id="rightbottom"></div>
</div>
</body>
</html>
left值好理解,就是实际的边距了。top值是怎么回事呢?原来第一个框放完之后,占用了200px的height,第二个框默认的位置是200px,现在要放在50px的位置,所以top要设置成-150px啦!以此类推,后面两个也这样设置。
怪不得要用float呢,这个方法确实有点麻烦呀,想改变第一个div的高度,后面的值都要重新计算了!
那么采用float的方法再写一遍吧!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我承认float可以简化代码</title>
<style type="text/css">
body, div{margin:0; padding:0}
#out{height:550px; width:750px; margin:0 auto; background:#ddd;}
#lefttop,#righttop,#leftbottom,#rightbottom{width:300px; height:200px; border:dashed 1px; display:inline;
float:left;margin:50px 0 0 50px;}
/*这里有个小细节:由于border有1px,如果右侧的右边界设置为50px,会因为超出out的范围,跑到下一行了。 */
#lefttop{ border: #0000FF;}
#righttop{ border: #00FF00;}
#leftbottom{border:#FF9900;}
#rightbottom{border:#9900FF;}
</style>
</head>
<body>
<div id="out">
<div id="lefttop"></div>
<div id="righttop"></div>
<div id="leftbottom"></div>
<div id="rightbottom"></div>
</div>
</body>
</html>
精简了一下代码,把值相同的设置堆一块去。
开始还犯了一个错误,心想左侧的float:left,右侧的想必是float:right了……原来所有的div都必须一致的向左上看呀!