今天在模仿京東的商品布局里遇到讓一個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里設置了的 。最后效果如圖：
可以看到最右邊框已經被隱藏了。