方法有很多种，是我就采用以下几种方式之一：
方式一：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，具体也类似方式二，这里就不罗列了。
一些详细的样式就不写了，这里只写了主要的样式，仅供参考。
你需要写一个CSS样式文件，后缀名称就是CSS，我这里正好写了一个CSS样式表，用于定义网站显示文字的格式，然后你复制这个代码将这个代码保存格式为：comman.css
/*------reset------*/body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{
margin:0
color: #000
font-size: 12px
font-family: "微软雅黑"
text-align: center
}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serifcolor:#6c6c6c}
body{padding-top:42px}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,i,b{font-style:normal}
ul,ol{list-style:none}
a{color:#6c6c6ctext-decoration:none}
a:hover{
color:#330033
font-size: 12px
text-align: left
}
img{border:0}
button,input,select,textarea{font-size:100%outline:nonevertical-align:middle}
textarea{resize:none}
table{
border-collapse:collapse
border-spacing:0
text-align: center
}
td,th,ul,ol{
padding:0
color: #000
text-align: center
font-family: "微软雅黑"
font-size: 12px
}
/*------common------*/
.pr{position:relative}
.pa{position:absolute}
.fl{float:left}
.fr{float:right}
.fl,.fr{display:inline}
.bc{margin-left:automargin-right:auto}
.cb{clear:both}
.db{display:block}
.clearfix{*zoom:1}
.clearfix:after{content:'\20'display:blockheight:0line-height:0visibility:hiddenclear:both}
.tc{text-align:center}
.tr{text-align:right}
.fb{font-weight:bold}
.fn{font-weight:normal}
.f16{font-size:16px}
.f14{font-size:14px}
.f_yh{font-family:'\5FAE\8F6F\96C5\9ED1'}
.ell{text-overflow:ellipsiswhite-space:nowrapoverflow:hidden}
.none{display:none}
.hidden{visibility:hidden}
.ht{overflow:hiddentext-indent:-9999pxtext-decoration:none}
.unl{text-decoration:underline}
.bd1{border:1px solid #d8d8d8}
.bd1-t{border-top:1px solid #d8d8d8}
.bd1-b{border-bottom:1px solid #d8d8d8}
.bd3{border:3px solid #d8d8d8}
.hlh30{height:30pxline-height:30px}
.hlh24{height:24pxline-height:24px}
.lh22{line-height:22px}
.hlh20{height:20pxline-height:20px}
.c1{color:#5d5d5d}/*积齥*/
.c2{color:#8f8f8f}/*k*/
.c3{color:#e44cea}/*a?k*/
.c4{color:#f49bff}/*toplink*/
.c5{color:#ff0000}
.bc1{background:#f3f3f3}/*积sk*/
.bc2{background:#f8f8f8}/*齭k*/
.bc3{background:#ffffff}
.mt10{margin-top:10px}
.mb10{margin-bottom:10px}
.mr9{margin-right:9px}
.ml7{margin-left:7px}
.ml89{margin-left:89px}
.p20{padding:20px}
.p10{padding:10px}
.pt1{padding-top:1px}
.pr6{padding-right:6px}
.pl6{padding-left:6px}
.w230{width:230px}
.spr{background:url(http://ossweb-img.qq.com/images/ktv/web201206/spr.png) no-repeatoverflow:hidden}
.ico{width:8pxheight:8pxline-height:8pxmargin:10px 8px 0 8px}
/*--notice--*/
.game-notice{width:1000pxpadding:60px 0 30px 0}
.game-notice em{padding:0 4pxcolor:#6c6c6c}
/*--footer--*/
.footer{
background:#19001a
color: #FFF
}
.foot-con{width:915pxpadding:20px 0 30px 85px}
.foot-logo{width:216pxheight:45pxborder-right:1px solid #3a173b}
.game-logo{width:107pxheight:35pxbackground-position:0 -232px}
.kaige-logo{width:93pxheight:35pxbackground-position:-107px -232pxcursor:default}
.foot-list{padding-left:15pxcolor:#673768}
.foot-list a{color:#673768}
.foot-list a:hover{text-decoration:underline}
.foot-link{width:578px}
.foot-link span{padding:0 5pxcolor:#3A173B}
.copy{width:576px}/* |xGv00|8d5f9fb42d5dc8f4155bd7ed0d0073ae */
