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

Question

我正在使用灯箱来显示图像，但左上角的近距离阵列显示，但我希望它在右边我是 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;
}

图像在右侧显示十字符号但远离图像

Answer 1

apply:

 right:0px;

float won't work in conjunction with absolute positioning.

Answer 2

Write like this:

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

}

& there is no need to define float when you use position:absolute because float is not work with position:absolute

Answer 3

一件重要的事情float不适用于绝对位置，所以你不需要在这里定义 float 你只需要添加right: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

我是通过position:relative; 对其父级和位置：绝对；给它的孩子，现在你可以看到它的工作正常......

Answer 4

It's not easy to answer without seeing some other html code, anyway float and position: absolute don't work together. I suggest you to remove the floating and add right: 0; to your css definition. You should also be sure that the parent of .lb-close has set position: relative;

Answer 5

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

add left: to your css code and place it where you exactly desire it.

eg:

left: 100px;