Question

我正在创建一个网页，就像网上购物一样。我已经创建了要在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;
}

Answer 1

只需在代码下方添加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>

Answer 2

希望这个小提琴帮助Fiddle

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

如何在div下面放置文本标签？

2 个答案: