1

我有一个 div#main包含可变或更大尺寸的图像。我想在其右上角放置一个关闭按钮，该按钮使用负边距稍微伸出 div。我overflow:hidden在我的#maindiv 上使用以防止主图像伸出 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' 的图像伸出它。

4

1 回答 1

2

您可以将 的内容包装#main在另一个div已overflow设置为的内容中hidden，类似于 tis 行：

<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同一页面上多次出现该元素。

于 2013-05-11T19:49:19.217 回答