方法有很多种，是我就采用以下几种方式之一：
方式一：table布局
这种左右分别对齐的排版，第一反应用table。我知道肯定有人开始鄙视我，说什么年代了还在用table。但是，我想说的是table也是标准标签之一，把标签用在合适的地方，就是对标签最优的利用，不是吗?
*{margin: 0
padding: 0
}
.personName{
text-transform: uppercase
} <table>
<tr>
<td valign="top">
<span class="personName">Georage：</span>
</td>
<td valign="top">
<p>This is a good day.</p>
<p>This is a good day.</p>
</td>
</tr>
<tr>
<td valign="top">
<span class="personName">Ken：</span>
</td>
<td valign="top">
<p>This is a good day.</p>
<p>This is a good day.</p>
</td>
</tr>
</table>
方式二：利用dl标签
*{margin: 0
padding: 0
}
.personName{
text-transform: uppercase
float: left
width: 80px
clear: left /* 清除左浮动 */
}
.words{
float: left
}
.dailog{
overflow: hidden /* 可以清除浮动 */
margin-bottom: 20px
line-height: 24px
font-size: 14px
}
<dl class="dailog">
<dt class="personName">
Georage:
</dt>
<dd class="words">
<p>This is a good day.</p>
<p>This is a good day.</p>
</dd>
<dt class="personName">
Ken:
</dt>
<dd class="words">
<p>This is a good day.</p>
<p>This is a good day.</p>
</dd>
</dl>
方式三：可以利用 ul 或者 ol 标签，方法类似 方式二。
方式四：可以全用div，具体也类似方式二，这里就不罗列了。
一些详细的样式就不写了，这里只写了主要的样式，仅供参考。
ie6中hover伪类的兼容性问题在IE6中，因为只支持css1，而hover伪类(css伪类)在css1中只支持<a>标签使用，其他标签一概不接纳。
只能考虑js代码辅助来兼容，推荐参考资料http://hi.baidu.com/css%BA%DA%B0%E5%B1%A8/blog/item/6529b7f211bdb4a5a50f5263.html
和
http://www.javaeye.com/topic/392913
如果为了不增加额外的js代码，可以考虑把非a标签的hover尽量调整成a标签的，不过也要同时修改其他样式。
本人推荐直接使用js实现你所想要的功能就好了，不用为了兼容css来那么苦涩的js
（1）在CSS样式中单击【新建】菜单命令，打开【新建CSS规则】对话框，选择【选择器类型】为“标签”、选择【选择器名称】为img（2）单击上图中的【确定】按钮，打开【img的CSS规则定义】对话框，选择【方框】选项。
单击【Float】选项下拉按钮，选择【left】选项，设置【Margin】选区中的选项为全部相同，值设为5，
（3）单击【img的CSS规则定义】左侧分类中的边框，如下图所示。
设置边框右侧属性为全部相同，“Style”值设为solid，“Width”值设为“2”；“Color”值设为“#F00”，至此图片CSS规则设置规则设置完毕，单击【确定】按钮，关闭规则编辑框。设置完后，可以发现实现效果与手工编写方式是一致的，没有什么不同。
