Question

我想在.preview和.shortcut之外显示一个关闭按钮，它们都具有overflow：hidden属性。位置：绝对不起作用，我不知道如何解决这个问题，因为父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);*/

}

Answer 1

这不起作用，但您提供的标记+ css不会创建您的Dropbox页面的布局。无论如何要解决它，请尝试按照

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

Answer 2

试试这个：

<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。

只需确保我设置为class="whatever_class"的div获得我已放入其中的style。只是一个快速的解决方案。

溢出的解决方法：隐藏;孩子例外？

2 个答案:

更新