今天在模仿京東的商品布局里遇到讓一個div懸浮在另一個div中的問題。即達到這樣的效果。
其中最大的div是 styleshouji ,懸浮的div有兩個,包含圖片的名為 p-img p-img-sys 包含文字與價格的名為 p-detail。
<ul class="style1shouji" > <!-- TemplateBeginEditable name="平板電腦" --> <!-- #BeginLibraryItem "/library/firsthot.lbi" --> <!-- {if $firsthot_list} --> <!--{foreach from=$firsthot_list item=auction}--> <li> <div class="p-img p-img-sys" style="opacity: 1;height:110px; position:relative; margin: 0 auto;"> <a href="{$auction.url}" target="_blank"><img src="{$auction.thumb}" alt="{$auction.goods_name|escape:html}" width="110" height="110" style="float:right"></a> </div> <div class="p-detail" style="display:inline"> <div class="p-name"> <a href="{$auction.url}" title="{$auction.goods_name|escape:html}" target="_blank">{$auction.short_style_name|escape:html}</a> </div> <div class="p-price"> <span style="font-size:14px; font-family:Verdana; color:#CC0000"><strong>{$auction.formated_start_price}</strong></span> </div> </div> </li> <!--{/foreach}--> <!-- {/if} --> <!-- #EndLibraryItem --> <!-- TemplateEndEditable --> </ul>
其中css是這樣寫的
.style1shouji li { width:225px; height:130px; position:relative; border-right:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; float:left; } .style1shouji li .p-detail { position: absolute; left:20px; top: 20px; } .style1shouji li .p-img p-img-sys{ height:110px; position:relative; }
將背景div作相對定位,懸浮的圖片作相對定位,懸浮的文字div作絕對定位即可。
參考這個例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>絕對定位相對定位</title> <style> * { margin: 0; padding: 0; } .fj1 { width: 150px; position: relative; height: 150px; border: 1px solid #000; background: #999; margin: 0 auto; } .zj1, .zj2 { width: 50px; height: 50px; position: absolute; right: -20px; top: 20px; border: 1px solid #F00; background: #FFF; z-index: 3 } .zj2 { right: -50px; top: 40px; z-index: 4; background: #903; border: 1px solid #093; } </style> </head> <body> <div class="fj1"> 我在下面 <div class="zj1">我浮動在上面</div> <div class="zj2">我浮動最上面</div> </div> </body> </html>
效果如圖:
另外發現另一個問題。在一個li中顯示下邊框與右邊框時,最后一個右邊框會和右邊已有的邊框線重復。如圖最右邊
如何解決這個問題呢?方法是將 li的寬度變大1個像素,這樣第3個邊框則會在整個ul之外了就可以不顯示了。代碼如下
.style1shouji{ width:900px; } .style1shouji li { width:226px; height:130px; position:relative; border-right:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; float:left; }
給 style1shouji設置一個比較大的寬度是因為當你將li的寬度由225px變成226px時會變形。外部div中設置 overflow:hidden;就可以了。 但是這里style1shouji並沒有設置那是因為它外部的div里設置了的 。最后效果如圖:
可以看到最右邊框已經被隱藏了。