我正在使用灯箱来显示图像,但左上角的近距离阵列显示,但我希望它在右边我是 CSS 新手。
我的 HTML 代码是为链接按钮一上的灯箱提供的
<div class="linkbutton">
<a href="image/popup_page_1.png" rel="lightbox"><img src="image/smallicon_2.png" alt="" /></a>
</div>
</div>
<div id="page_two" class="panel">
<div class="main_heading_two">Strategy</div>
<div class="menu">
<ul>
<li class="stix"></li>
<li><a href="#page_one"><img src="image/overview.gif" /></a></li>
<li class="stix"></li>
<li><a href="#page_two"><img src="image/strategy_active.png"/></a></li>
<li class="stix"></li>
<li><a href="#"><img src="image/draxxin.gif"/></a></li>
<li class="stix"></li>
<li><a href="#"><img src="image/excede.gif"/></a></li>
<li class="stix"></li>
<li><a href="#"><img src="image/results.gif"/></a></li>
<li class="stix"></li>
<li><a href="#"><img src="image/reference.gif"/></a></li>
<li class="stix"></li>
</ul>
</div>
<div class="rightclass_one"><img src="image/whiteslide.png"/></div>
<div class="pagetwo_text"><p>Get up to 21 days of BRD therapy strategy using longer-duration antimicrobials DRAXXIN ® (tulathromycin) Injectable Solution and EXCEDE ® (ceftiofur crystalline free acid) Sterile Suspension.
</p></div>
<div class="pagetwo_list_text">Advantages for Producers:
<ul><li>Fewer treatments</li>
<li>Less stress on cattle</li>
<li>Fewer mortalities</li>
<li>Cattle can recover in their own pen
</li>
<li>Lower treatment costs and higher profits
</li></ul></div>
<div class="pagetwo_list_text2">Extended duration strategy
</div>
<div>
<ul>
<li class="midmenu_1"><a href="#page_one"><img src="image/backward.png"/></a></li>
<li class="midmenu_2"><a href="#page_two"><img src="image/forward.png"/></a></li>
</ul>
</div>
<div class="right_text"><p>Either way you use them, it takes both DRAXXIN and EXCEDE for control and treatment of BRD in high-risk cattle to give you the longest duration of BRD therapy
</p></div>
<div class="image_21"><img src="image/pagetwo_graph_two_4.png"/></div>
<div class="ratemeter"><img src="image/pagetwo_graph_one.png"/></div>
<div id="one" class="image_one" ><img src="image/optiononetwo.png"/></div>
<div id="two" class="image_two"><img src="image/optiononeone.png"/></div>
<div id="three" class="image_one_one" ><img src="image/pagetwo_graph_two_11.png" /></div>
<div id="four" class="image_two_two" ><img src="image/pagetwo_graph_two_22.png"
/></div>
<div class="option_image"><img src="image/option_1.png" onclick="showHideDiv()"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="image/option_1.png" onclick="showHideView()"/></div>
<div class="option_image_label_one">Option 2</div>
<div class="fourteen_day"><img src="image/button_14days.PNG"/></div>
<div class="heading_one">Post Metaphylaxis Interval (PMI)</div>
<div class="linkbutton_one">
<a href="image/popup_1_page_2.png" rel="lightbox"><img src="image/smallicon_1.png" alt="" /></a>
</div>
<div class="seven_day"><img src="image/button_7days.PNG"/></div>
<div class="heading_two">Post Treatment Interval (PTI)</div>
<div class="linkbutton_two">
<a href="image/popup_2_page_2.png" rel="lightbox"><img src="image/smallicon_1.png" alt="" /></a>
</div>
</div><!-- End of page two-->
Belos 是我用于灯箱的 css
.lb-data .lb-close {
width:35px;
position: absolute;
float: right;
padding-bottom: 0.7em;
outline: none;
top:-35px;
}
图像在右侧显示十字符号但远离图像