今天又为了CSS布局的事情折腾了两个多小时。一件本来想象中很容易的事情没想到最后居然要用取巧的方法才能解决，实在有点不甘心。稍事总结，还是觉得有些想法要一吐为快。

事情是这样的：手上的网页界面需要实现这样一个效果，每次实时从服务器得到的消息都要显示在一个方形区域里。其中发送者处于左上角，下面是消息本身。另外这块区域的右边需要一块方形区域用来显示消息对应的表情。大概构思了一下就开始动手做了，最初的实现方式是：
<div>
<div>发送者</div>
<div>消息</div>
<div>表情图片代号</div>
</div>
然后设想用css定位来得到希望的效果。但是问题来了：如果光用float属性，表情图片打死都不会和发送者div的顶部对齐，而是始终保持和消息div顶部对齐。而如果用上position属性，无论absolute还是relative都无法实现需要的效果。因为relative属性的实质是将元素在其“本来的位置”的基础上进行位移，这样会留下一大块空白。而absolute无法使用的原因是所有的消息都需要一个类似的方框，如果用absolute，所有的表情图片都会挤到一个地方去。
穷尽所有的CSS定位相关的选项之后只能退后一步，看能不能通过更改文档结构来达到需要的效果。答案是肯定的：
<div>
<div>
<div>发送者</div>
<div>消息</div>
</div>
<div>表情图片代号</div>
</div>
既然表情所在的div在设置了float之后始终要和它之前的div肩并肩，那么只要将前两个div套在一个div里让表情去对齐就可以了。至此问题解决。

接下来反思一下。采用css和div进行页面排版有其简单之处，但是不能不看到div的一些先天缺陷。div不加任何修饰的时候是页面纵向的一段，表达的是纵向上的意义，但是很多时候div被当作一个盒子在使用，不光是有纵向上的意义，也具有横向上的意义。而这份通过css强加上去的横向上的意义使得div在很多时候的使用相当蹩脚。比如难以实现多栏排版，难以实现div之间相对位置的相对复杂的定义等等。换句话说，现在我们在使用一个并不是特别合适的工具来解决页面排版的问题。抛弃table 并不能让我们的日子好过很多。
有了问题就要解决问题。div的问题在于它不是一个盒子而被当作盒子在使用，而table的问题在于它很容易包含太复杂的结构而让接下来对文档内容的更改难以进行。那么这里设想一下：理想的适于排版的html元素应该具有如下特征：
1。易于理解的用于定位的原点。
2。本身是一个盒子
3。具有合适的机制用来防止轻而易举的生成复杂结构的行为。如果无法做到前一点，应该具有易于使用的用来对这个结构进行操作的机制。
下面是一些讨论：
要做到第一点其实很具有挑战性。网页和杂志不同，网页高度是不确定的。而杂志和书籍有固定的区域。对于出版物来讲，随便使用一个角作为原点就可以轻松实现各种排版效果，所需要的仅仅是相对原点的偏移而已。而网页高度不定的特点使得使用页面上方某个角的方法很容易造成网页编写者在网页滚动了一段距离之后忘记之前的内容，因为之前的内容实在是太多了。现在浏览器广泛使用的“文档流”概念相信是对这个问题做出的补偿，但是不同的浏览器对于这个流有不同的理解，似乎没有相关的标准来规定文档流的行为。综上，实现第一点并不容易。
对于第三点，如果现在的table能够支持像excel里那样使用行和列来定位某个格子的话，相信它的使用会广泛很多。可是当时html的发明者并没有考虑那么多。一声叹息。

综上，现阶段使用的网页排版技术其实并不完善。HTML5快来了，不知道它会不会让网页排版容易一点？