html页面转成jsp出现排版混乱的问题

张某人 2012-03-05 11:54:19

jsp代码如下：
<div class="hotRecommendBox">

<h2>
<a href="#"><img src="images/guanggao1.jpg" /></a>
<a href="#"><img src="images/guanggao1.jpg" /></a>
</h2>
<ul id="con_porHot_1" >
<li>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
</li>
<li class="last">
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
<dl>
<dt><a href="#"><img src="http://img05.yesmywine.com/5144367/110x180.jpg" /></a></dt>
<dd><a href="#">贝卡贝拉兹方达干红葡</a></dd>
<dd>也买价: 624.0 元 已售出:12568 件</dd>
</dl>
</li>
</ul>
</div>

css代码如下：
.hotRecommendBox {width:948px; float:left; margin-top:5px; padding:5px; display:inline; border:1px solid #ddd; border-top:4px solid #ddd; position:relative;}
.hotRecommendBox i {width:70px; height:4px; overflow:hidden; background:#B7262B; position:absolute; left:-1px; top:-4px;}
.hotRecommendBox h2 {width:320px; float:left; margin-top:-5px; margin-right:5px; display:inline;}
.hotRecommendBox h2 img {margin-top:5px; display:inline; float:left;}
.hotRecommendBox ul {width:623px; float:right; margin-top:-5px; display:inline; overflow:hidden;}
.hotRecommendBox ul li {width:624px; height:240px; float:left; overflow:hidden; margin-top:5px; display:inline; background:url(http://img02.yesmywine.com/newWeb/images/button/xuxianX.gif) repeat-x bottom;}
.hotRecommendBox ul li.last {background:none;}
.hotRecommendBox ul li dl {width:136px; padding:0px 10px; float:left; background:url(http://img02.yesmywine.com/newWeb/images/button/xuxianY.gif) repeat-y right;}
.hotRecommendBox ul li dl dt {width:136px; height:180px; overflow:hidden; float:left; text-align:center;}
.hotRecommendBox ul li dl dd {width:136px; overflow:hidden; float:left; font:normal normal 12px/18px \5b8b\4f53; color:#666;}
.hotRecommendBox ul li dl dd a ,.indexSuitLeft ul li span a ,.newArrival ul li dl dd a ,.collection ul ol li dl dd a{color:#666;}
.hotRecommendBox ul li dl dd a:hover,.indexSuitLeft ul li span a:hover,.newArrival ul li dl dd a:hover ,.collection ul ol li dl dd a:hover {color:#B70513; text-decoration:underline;}
.hotRecommendBox ul li dl dd b ,.indexSuitLeft ul li span b,.newArrival ul li dl dd b ,.collection ul ol li dl dd b{color:#B70513; font-weight:bold;}

...全文