首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

css页面布局-向左浮动解决思路

2012-04-14 
css页面布局--向左浮动CSS code/*Library*/.GoodsSearchWarp{/*外层*/width:98%text-align:leftclear:b

css页面布局--向左浮动

CSS code
/*=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;    }



HTML code
<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> 



现在的结果是
http://shop319167.p108.shopex.cn/english/index.php?gOo=goods_search_list.dwt&gcat=31
我想把它调整成一行显示三张图片 请各位大侠指点

[解决办法]
li float:left
每到第三个li的时候加入清空浮动clear:both
[解决办法]
在三张图片的css样式加上就可以了float:left
[解决办法]
首先设置好大小和高度,在设置成float:left就可以了
[解决办法]
要是你使用table布局!写一个tr 在加上三个td 估计就可以了! 
我看到你的全是div 为什么不用table啊
[解决办法]
探讨

要是你使用table布局!写一个tr 在加上三个td 估计就可以了!
我看到你的全是div 为什么不用table啊

[解决办法]
div控制不明白 - -!

热点排行