0

.preview と .shortcut の外側に閉じるボタンを表示したいのですが、両方とも属性がoverflow: hidden になっています。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から削除する 2) 次のルールを CSS に追加 div.shortcutする.preview

.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 に答える