在这里，先想说一下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>
当然，这个例子还是比较简陋的，可以参照我的网站 www.txstory.com 的首页面来看一下用div布局的实际效果，非美工出品，比较简陋，请多包涵
分享到：
相关推荐
11.2 固定宽度且居中的版式 11.2.1 方法一 11.2.2 方法二 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例：电子相册 11.5.1 搭建框架 11.5.2 幻灯片模式 11.5.3 详细信息模式 11.6...
3.7 二列固定宽度居中 3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动...
有需要则设置各个div需要的宽度，但总和不超过父盒子的宽度。 c . 有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错； d . 处理父盒子的高度：在最后位置设置一个用于清除浮动的...
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
11.1.2 纵向排列框架和横向排列框架(rows属性、cols属性) 11.1.3 嵌套框架集 11.1.4 不显示框架时(noframes元素) 11.2 框架窗口的内容和外观(frame元素) 11.2.1 设置框架的初始内容 11.2.2 框架窗口边框线的设置 ...
默认值，横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸 属性：background-size: 取值： 1.width hegiht 2.width% height% 3.cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 ...
优化高亮代码显示方式，放弃Table布局，改用Div+CSS，兼容多种浏览器乃至IE6以及移动浏览器； 添加代码工具栏，实现一键复制等功能，同样兼容多种浏览器。 等待你们去发现…… 更新时间： 2012-5-27 13:58:36 演示...
优化高亮代码显示方式，放弃Table布局，改用Div+CSS，兼容多种浏览器乃至IE6； 添加代码工具栏，实现一键复制等功能，同样兼容多种浏览器。 等待你们去发现…… 我的博客： http://lanfei.sinaapp.com/ ...
优化高亮代码显示方式，放弃Table布局，改用Div+CSS，兼容多种浏览器乃至IE6； 添加代码工具栏，实现一键复制等功能，同样兼容多种浏览器。 等待你们去发现…… 我的博客： http://lanfei.sinaapp.com/ ...
<div align="center" id="container" title="这是一个div"></div> 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用 类选择器时使用(CSS中)...