你也可以的，Div Without Table

目标效果：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300620485193.jpg"></a>

首先要创建Html页面：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300620534260.jpg"></a>

页面总共由8大块div 构成。

按照从左到右，从上到下的原则来分的

1：divWholeScreen

2：divPageBox

3：divTitle

4：divOuterUpperLeft

5：divOuterUpperRight

6：divOuterLowerLeft

7：divOuterLowerRight

8：divContent

Html代码如下：

直接浏览：效果如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300620584265.png"></a>

看来要做的还不少。

1：设置下Body的背景颜色

2：因为各个浏览器的body的 margin 都不一致。所以手动将margin 设置为0，但是在divWholeScreen里面设置，当然如果只是将margin设置为0，直接在body元素上设置也是一样的。

3：设置下divPageBox的宽度，基本上大型网站的宽度都是固定的，为什么，因为在不同分辨率下，如果让宽度也自动伸缩的话，界面会变化，所以宁可出现滚动条，也不希望界面元素位置发生大的变动，同时也设置下border，background-color。

效果如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621022775.png"></a>

4：要开始设置标题了。

首先，标题的宽度要固定，文本要居中：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621041370.jpg"></a>

可是为什么没有居中？？

OK，看下border。

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621073237.png"></a>

可以看到text-align:center; 的确起了作用，文本的确居中了，但是因为width:400px;

为了让title 的div元素 居中，需要设置margin;

修改divTitle的css：

值得注意的是必须设置margin-left 和margin-right. 读者可以自己尝试下只设置margin-left 的效果。

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621097995.png"></a>

5：设置divOuterUpperLeft

比较简单，设置下宽度和高度，和背景，效果如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621119306.jpg"></a>

因为divOuterUpperLeft 属于文档流，所以布局系统会认为后面的内容应该在divOuterUpperLeft 之后呈现，解决这个问题的方式有很多种，可以设置float:left;效果如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621139786.jpg"></a>

因为我们需要将左上角固定住。所以选择position:absolute;

修改代码为：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621147443.jpg"></a>

如果你将浏览器放大：效果如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621165100.jpg"></a>

可以看到虽然设置了position:absolute; 但是它布局找的父元素是body。所以需要手动修改divPageBox为它的布局参考父元素。设置divPageBox的 position:relative就可以了，代码如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621198495.png"></a>

可以看到left，和top参考的就是divPageBox 元素了。

同样道理，为divOuterUpperRight, divOuterLowerLeft, divOuterLowerRight也加上吧。

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621228825.jpg"></a>

好了，接着设置4个div中的4个小的div：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621258566.jpg"></a>

OK。基本已经实现了。现在还需要设置内容divContent。

首先需要设置的是宽度，总宽度是800，左右两个div。150 *2。接着还有一些margin。所以设置width为370，设置下background-color，和padding.font-size：

代码如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621276779.jpg"></a>

因为4个div已经脱离了标准布局流了，所以divContent 直接靠左。可以通过设置margin-left:200px;

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621306553.jpg"></a>

还差最后一步，设置This was my goal!(divMyGoal)

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621347015.jpg"></a>

不错，基本实现了效果了。

目标是：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621393050.jpg"></a>

需要让This was my goal!!到右边去。

所以设置：position:absolute;bottom 和right 都是0.

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621434069.jpg"></a>

还是上面的那个问题，divMyGoal 布局参考的元素是divPageBox。

所以需要设置divContent 的positon:relative;这样divMyGoal参考的元素就是divContent了。

最终效果如下：

<a href="http://images.cnblogs.com/cnblogs_com/LoveJenny/201108/201108300621469350.jpg"></a>

当然，让一个元素靠边还有另一种方法，例如float:right。也是可以的。

本文转自LoveJenny博客园博客，原文链接：http://www.cnblogs.com/LoveJenny/archive/2011/08/30/2159061.html，如需转载请自行联系原作者