我正在使用灯箱作为图像,但是关闭数组显示在左上方,但我想要它在右边我是CSS的新手。
我的HTML代码是针对linkbutton one上的灯箱提供的
<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;
}
图像显示右侧的交叉标志,但远离图像
答案 0 :(得分:1)
适用:
right:0px;
float不能与绝对定位一起使用。
答案 1 :(得分:1)
像这样写:
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
&安培;使用 position:absolute 时无需定义 float ,因为 float 不适用于 position:absolute
答案 2 :(得分:0)
如果没有看到其他一些html代码就不容易回答,无论如何float和position: absolute
不能一起工作。我建议您删除浮动并将right: 0;
添加到您的css定义中。您还应确保.lb-close
的父级已设置position: relative
;
答案 3 :(得分:0)
.lb-data .lb-close
{
width:35px;
position: absolute;
/*float: right;*/ <-- delete this
padding-bottom: 0.7em;
outline: none;
top:-35px;
right: 0; <-- new line to add
}
答案 4 :(得分:0)
一个重要的事情 float 不适用于绝对位置,所以你不需要在这里定义浮点数你只需要添加右: 0; 我希望这会顺利运作....
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
更新的答案 看到这里的演示工作正常: - http://jsbin.com/ilixux/5/edit
我通过位置:亲属; 到它的父级,位置:绝对; 到它的孩子,现在它的工作正常,你可以看到....
答案 5 :(得分:-1)
将 left:添加到您的css代码中,并将其放在您想要的位置。
例如:
left: 100px;