0

我想在 .preview 和 .shortcut 之外显示一个关闭按钮，它们都具有属性溢出：隐藏。position: absolute 不起作用，我不知道如何解决这个问题，因为父 div 会动态调整大小。

任何帮助，将不胜感激

https://dl.dropboxusercontent.com/u/12598822/close_revert.html

HTML：

<div class="shortcut" id="3"><div class="preview thumbs">
                                <a class="cross" id="crosshidden" href="#"></a>
                                <a class="link" href="http://master.elementaryos.org/developer"><img class="thumb" src="http://api.webthumbnail.org?width=500&height=499&format=png&screen=1024&url=dribbble.com" title="Developer | elementary OS"></a>
                                </div><div class="title">Dribbble</div></div>

CSS：

.shortcut {
    overflow: hidden;
    /*border: 1px solid blue;*/
    position: relative;
    overflow: hidden;
    display:inline-block;
}

.preview {
    width: 90%;
    height: 75%;
    margin: auto;
    border: 1px solid #aaaaaa;
    /*-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    */position: relative;
    -webkit-border-radius: 3px;
    overflow: hidden;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.15);
    /*-webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);*/

}
4

2 回答 2

1

这不起作用，但您提供的标记+css 不会创建您的保管箱页面的布局。无论如何要修复它，请尝试以下

1）overflow: hidden从div.shortcut和.preview类中删除
2）将以下规则添加到您的 CSS 

.preview a{
    display: block;
    height: 100%;
    overflow: hidden;
}

更新

与此问题无关，但您还希望遵循规则的background样式.cross（不重复背景） 

    background: url("http://www.lngbahrain.com/uploadedImages/EventRedesign/Dubai/2013/January/21276001/Assets/lightbox_close_button.png") no-repeat scroll 0 0 transparent
于 2013-04-25T20:28:06.703 回答
0

试试这个：

<div class="shortcut" id="3">
    <div class="preview thumbs">
        <div class="whatever_class" style="height: 100%; overflow: hidden;">
            <a class="link" href="http://master.elementaryos.org/developer">
                <img class="thumb" src="http://api.webthumbnail.org?width=500&height=499&format=png&screen=1024&url=dribbble.com" title="Developer | elementary OS">
            </a>
        </div>
        <a class="cross" id="crosshidden" href="#"></a>
    </div>
    <div class="title">Dribbble</div>
</div>

然后，overflow: hidden从您的.shortcut, 和.preview类中删除。

只要确保我设置为的 divclass="whatever_class"得到style我放置在其中的那个。只是一个快速的解决方案。

于 2013-04-25T20:24:11.760 回答