通用HTML结构与CSS样式:

1
2
3
4
<div class="wrapper">
<h4>左标题</h4>
<p>右描述</p>
</div>
1
2
3
4
5
6
7
8
.wraper { border: 1px solid orange; margin-bottom: 10px; line-height: 30px;}
.fl { float: left;}
.fr { float: right;}
.clearfix:before,.clearfix:after { content: ""; disply: table;}
.clearfix:after { clear: both;}
.tr { text-align: right;}
.prel { position: relative;}
.pabs { position: absolute;}

方法一: 左右浮动

1
2
3
4
<div class="wrapper clearfix">
<h4 class="fl">左标题</h4>
<p class="fr">右描述</p>
</div>

方法二: 左浮动,右描述居右

1
2
3
4
<div class="wrapper clearfix">
<h4 class="fl">左标题</h4>
<p class="tr">右描述</p>
</div>

方法三: 右描述在前,右浮动

1
2
3
4
<div class="wrapper clearfix">
<p class="fr">右描述</p>
<h4>左标题</h4>
</div>

方法四: 左绝对定位,右描述居右

1
2
3
4
<div class="wrapper prel">
<h4 class="pabs">左标题</h4>
<p class="tr">右描述</p>
</div>

方法五: 左绝对定位,右描述右浮动

1
2
3
4
<div class="wrapper clearfix prel">
<h4 class="pabs">左标题</h4>
<p class="fr">右描述</p>
</div>

方法六: 右绝对定位

1
2
3
4
<div class="wrapper prel">
<h4>左标题</h4>
<p class="pabs" style="right: 0;bottom: 0;">右描述</p>
</div>

方法七: 右描述居右,给margin-top为 负的父元素的height

1
2
3
4
<div class="wrapper">
<h4>左标题</h4>
<p class="tr" style="margin-top: -30px;">右描述</p>
</div>