Question

enter image description here 我正在使用灯箱作为图像，但是关闭数组显示在左上方，但我想要它在右边我是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;
}

enter image description here 图像显示右侧的交叉标志，但远离图像

Answer 1

适用：

 right:0px;

float不能与绝对定位一起使用。

Answer 2

像这样写：

 .lb-data .lb-close {
 width:35px;
 position: absolute;
 padding-bottom: 0.7em;
 outline: none;
 top:-35px;
right:0;

}

＆安培;使用 position：absolute 时无需定义 float ，因为 float 不适用于 position：absolute

Answer 3

如果没有看到其他一些html代码就不容易回答，无论如何float和position: absolute不能一起工作。我建议您删除浮动并将right: 0;添加到您的css定义中。您还应确保.lb-close的父级已设置position: relative;

Answer 4

.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
}

Answer 5

一个重要的事情 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

我通过位置：亲属; 到它的父级，位置：绝对; 到它的孩子，现在它的工作正常，你可以看到....

Answer 6

将 left：添加到您的css代码中，并将其放在您想要的位置。

例如：

left: 100px;

如何在右上方而不是左侧显示关闭按钮

6 个答案: