本文共 1206 字，大约阅读时间需要 4 分钟。

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都需要设置成多少，才能把四个小框框的位置排出来呢？反正我是没猜对……

left值好理解，就是实际的边距了。top值是怎么回事呢？原来第一个框放完之后，占用了200px的height，第二个框默认的位置是200px，现在要放在50px的位置，所以top要设置成-150px啦！以此类推，后面两个也这样设置。

怪不得要用float呢，这个方法确实有点麻烦呀，想改变第一个div的高度，后面的值都要重新计算了！

那么采用float的方法再写一遍吧！

精简了一下代码，把值相同的设置堆一块去。

开始还犯了一个错误，心想左侧的float:left，右侧的想必是float:right了……原来所有的div都必须一致的向左上看呀！

转载地址：http://wfmji.baihongyu.com/