1

オンライン ショッピングと同じように Web ページを作成しています。ここでは、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 に答える