图文混排，展示策略

思路： 先用dl把图和文字给放入一个区块，然后再浮动dl

<div id="content">
<h1>楼盘展示</h1>
<dl>
    <dd><img src="images/pic1.jpg" alt="三盘领海"/></dd>
    <dt>三盘领海</dt>
</dl>
<p>共计：5条记录  页次：1/1 每页：5条  上一页/下一页</p>
</div>

<dl>
  <dd><dd>
  <dt></dt>
  <dt></dt>
  <dt></dt>
  <dt></dt>
  <dt></dt>
</dl>

#content dl{
  width:250px;  ---也可以更大  width:280px ---这样的好处是 使得左右两边的dl有间隔
   -----这里的参数是先根据img来设计，比img高和宽，然后下面的算完后，在
  -----150px+30px+1px = 181px
  height:181px;
  float:left;
padding-left:30px;  ////使得左边间距有25px  这是float时常用的技巧
}

#content dl dd{
  width:250px;
  height:150px;
}
#content dl dd img{
  display:block;
  width:250px;
  height:150px;
}

#content dl dt{
#width:250px;
#height:30px;
text-align:center;
line-height:30px;
border-bottom:1px solid #f60;
}

#content p {
  clear:both; -----清除浮动，使得浮动对他没有效果
  padding-top:30px;  --- 注意：这时候margin-top已经失效，所以margin 和padding总有一个有效
}