在这里，先想说一下div布局和table布局孰优孰劣的问题，个人觉得其实不是说div布局就一定要好于table。个人感觉最外层的布局用table蛮不错的，就是代码过多，眼晕，没别的坏处。
言归正传，假设想用布局一个固定宽的的网站，应该怎样去做？div是“块”元素，每个div默认都会占据一行的，如果要用div进行布局的话，我们首先要做的就是使div可以横向排列。这通过设置float为left实现的。
我们可以简单的来试验一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body >
<div style="width:200px;float:left;border:1px solid red" >
第一个
</div>
<div style="width:200px;float:left;border:1px solid red" >
第二个
</div>
</body>
</html>
看，两个div紧挨着排列起来了。
接下来呢？还有啥要做的呢?我们需要div能够自动扩展才行，更多的情况下，为了布局美观，我们还需要给div指定一个最小的高度。因为在浏览器中，指定了高度div是不随着里面内容的增加扩展的，我们需要设置上min-height这样的属性，这时为了在ie6下也能够使用，我们还需要增加一个ie专用高度：_height。
这样，就可以完美的进行竖向自动扩展了。
请注意，这里的说的是自动扩展，而不是自动充满，关于让div自动充满整个页面的方法，请参见我的其他文章。
还有啥要做的呢，由于对内部div指定了float，此时的外部div就不能够自动扩展了，我们需要在后面增加一个div，设置clear属性为both，以便于清除浮动。这时，一切OK了！
最后，我们还要使页面居中展示，一般对于固定宽的的页面都会这样设置，对称嘛。
我们需要在body上增加text-align:center样式以及在最外部的div上增加margin-left: auto;margin-right: auto;width:604px;即可。
全部代码如下。很简单吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body style="text-align:center" >
<div style="border:#000000 solid 1px;margin-left: auto;margin-right: auto;width:604px;">
<div style="width:300px;min-height:100px;border:#00ffff solid 1px;float:left">第一个<br/>第一个<br/>第一个<br/第一个<br/>第一个<br/>第一个<br/>第一个<br/>第一个<br/>第一个<br/></div>
<div style="width:300px;min-height:100px;border:#00ffff solid 1px;float:left">第二个<br/>第二个<br/>第二个<br/></div>
<div style="clear:both"></div>
</div>
</body>
</html>
转载的，希望对有些朋友有一定用处哦！(*^__^*) 嘻嘻……
浙公网安备 33010602011771号