css页面布局--向左浮动
/*=Library*/.GoodsSearchWarp{/*外层*/ width:98%; text-align:left; clear:both; margin:15px auto;}.GoodsSearchWarp .title{/*头部*/ border:1px solid #f2f2f2; padding:1px; border-left:3px solid #f90; border-bottom:3px solid #f2f2f2; height:30px;}.GoodsSearchWarp .title .path{/*显示路径*/ padding-left:5px; padding-top:5px; float:left;}.GoodsSearchWarp .title .listmode{/*搜索列表排序方式*/ padding-top:3px; display:inline; float:right;}.GoodsSearchWarp .title .listmode select{/*搜索列表排序方式*/ background:#f2f2f2; font-size:12px; color:#000;}.GoodsSearchWarp .ItemsWarp {/*商品条目循环项外层*/ width:100%;}.GoodsSearchWarp .items {/*商品条目循环项*/ width:210px; padding:10px; border-bottom:1px dotted #ccc;}.GoodsSearchWarp .items .goodpic{/*商品图片*/ float:left;}.GoodsSearchWarp .items .goodpic a {/*商品图片*/ padding:3px; border:1px solid #ccc; margin:0 5px; display:block; width:200px; height:200px; overflow:hidden; vertical-align:middle}.GoodsSearchWarp .items .goodpic a img{/*商品图片*/ margin:0 auto; display:block; }.GoodsSearchWarp .items .goodpic a:hover {/*商品图片-MouseOver*/ border:2px solid #369; padding:2px;}.GoodsSearchWarp .items .goodinfo{ width:80%;}.GoodsSearchWarp .items h1 a{ font-weight:bold; color:#000; margin-bottom:10px; font-size:14px;}.GoodsSearchWarp .items ul{display:block;}.GoodsSearchWarp .items ul li{ color:#000; float:none;}.GoodsSearchWarp .items .intro{ color:#369;}.GoodsSearchWarp .items .button{ margin:4px 0; float:right; }
<div class="GoodsSearchWarp"> <form name="FORM_TPL_GOODSSEARCHLIST" action="index.php" method="get"> {form_hidden_value} <div class="title"> <div class="path"><a href="shop.dwt">Home</a> {goods_catmenu}</div> <div class="listmode">Sort by-{goodslist_order} {brandlist}</div> <div class="clear"></div> </div> <div class="ItemsWarp clearfix"> <!-- BEGIN goodslist_row 0,1,2 --> <div class="items"> <div class="goodpic"><a href="goods_details.dwt?goodsid={goods_id}&productname={goods_seoname}" target="_blank" onmouseover="if(document.readyState=='complete') listPicLib.show(this,[{goods_images}]);" onmouseout="listPicLib.out();" >{goods_small_image}</a></div> <div class="goodinfo"> <h1><a href="goods_details.dwt?goodsid={goods_id}&productname={goods_seoname}" target="_blank">{goods_name}</a></h1> </li> <!-- CTRLBEGIN marketpriceshow --> <li>List Price:{goods_price1}</li> <!-- CTRLEND marketpriceshow --> <li>Price:<span class="p14redb">{goods_price2}</span></li> <!-- CTRLBEGIN savepriceshow --> <li>{goods_savetitle}{goods_saveprice}</li> <!-- CTRLEND savepriceshow --> <!-- CTRLBEGIN pointshow --> <li>Score:{goods_point}</li> <!-- CTRLEND pointshow --> <li class="intro">{goods_intro}</li> <li class="intro">{goods_paybutton}</li> <li class="button">{goods_buybutton} <a href="addmembergoods.do?goodsid={goods_id}"><img alt=Add to favorite src="images/fav.gif" /></a></li> </ul> </div> <div class="clear"></div> </div> <!-- END goodslist_row --> </div> </form></div>