Question

我有一个div #main，其中包含可变或更大尺寸的图像。我想在它的右上角放一个关闭按钮，使用负边距延伸出div。我在我的overflow:hidden div上使用#main来阻止主图像延伸到div之外。但这也是剪辑我的关闭按钮。

我有以下html：

<div id="container">
    <div id="main">
        <div id="close">x</div>
        <img src="http://lorempixel.com/300/300" /> 
    </div>
</div>

以下CSS：

#container{
    background:#555;
    height:100%;
    width:100%;
    overflow:hidden;
}
#main{
    position:relative;
    width:100px;
    height:200px;
    margin:50px;
    display:block;
    overflow:hidden;
}
#close{
    background:#069;
    height:30px;
    width:30px;
    background:#fff;
    position:absolute;
    top:0px;
    right:0px;
    margin:-10px -10px 0 0;
}

这是一个小提琴：http://jsfiddle.net/zFjdf/你可以看到关闭被剪掉了。

我希望完全关闭按钮，而不会让#main的图像伸展出来。

Answer 1

您可以将#main的内容包含在div设置为overflow的其他hidden中，其中包含以下内容：

<div id="main">
    <div id="close">x</div>
    <div class="wrap">
        <img src="http://lorempixel.com/300/300" />
    </div>
</div>

并在CSS中：

.wrap {
    width:100%;
    height:100%;
    overflow:hidden;
}

并删除overflow属性表单#main。

jsfiddle

此外，对于#close框，您可以使用padding代替width / heignt来使X居中。您应该考虑使用class代替id来应用样式，尤其是当您计划在同一页面上多次出现main元素时。

右上方的关闭按钮被剪裁

1 个答案:

jsfiddle