您的位置：首页 > Web前端 > CSS

CSS/DIV：不用float实现块状元素/block/的同行排列

2012-06-11 13:38 459 查看

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都必须一致的向左上看呀！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航