1

我正在创建一个网页，就像在线购物一样。在这里​​我创建了要在 div 内显示的图像。我使用 span 在图像上放置了一个缩放按钮。不知道如何在其正下方放置一个显示成本和名称的框。我尝试将 div 放入其中，但它不起作用。

    ------------
    |          |
    |  image   |
    |          |
    |--        |
    |  |Zoom   |
    ------------
    | label    |
    ------------

我需要将标签放在 div 的正下方。谁能帮助我实现它。

<div class="box photo lefttooltip" title="Sample Text" >
    <div  id="leftimage">
        <img id="orn<%=j%>" class="drag ornthumb1" align="center" src="<%=itms[j]%>" alt="" />
    </div>
    <span id="leftzoom" onClick="zoominProduct('<%=itms[j]%>')">
        <img class="zoomin" src="jqe13/image/left_zoom_hover.png" title="Zoomin">
    </span>
</div>

CSS：

#leftimage { 
    height:80px; 
    width:100%; 
    background-color:#FFF; 
    position:relative;
}

#leftimage img {  
    max-height: 98%;
    max-width: 98%;
    padding: 1%; 
    line-height:none;
}

#lt_scroller .box #leftzoom img {
    line-height:normal; 
    padding:2px;
}

#lt_scroller .box #leftzoom {
    width:auto; 
    height:16px; 
    float:left;
    top:-16px;  
    left:2px; 
    position:relative; 
    z-index:1000; 
    line-height:normal;
}

#lt_scroller .box #leftzoom:hover { }

.imgcontainer #leftzoom { 
    display:none;
}

#leftzoom img { 
    opacity:.3;
}

.ornthumb1 {
    width: auto;
    height:100px;
    //float:left;
}
4

2 回答 2

2

只需在代码下方添加您的 div， 

<div class="box photo lefttooltip" title="Sample Text" >    
<div  id="leftimage"><img id="orn<%=j%>" class="drag ornthumb1" 
align="center" src="<%=itms[j]%>" alt="" /></div>    
<span id="leftzoom" onClick="zoominProduct('<%=itms[j]%>')">        
<img class="zoomin" src="jqe13/image/left_zoom_hover.png" title="Zoomin"></span>    
</div>    
--------------- add here ---------------------------
<div style="clear:both;"></div>
<div class=""> Your label contnet here</div>
于 2013-06-20T09:45:25.253 回答
2

希望这个小提琴对小提琴有帮助

<div class=wrapper>
<div class="container">
    <div class="image">
    </div>
    <div class="cost">
        cost: $4.99
    </div>
</div>

于 2013-06-20T10:00:30.953 回答