0

Susy で構築された 9 つの画像の 3x3 マトリックスがあります。垂直ガターが私が提案したように動作しないのはなぜだろうと思っただけです。次に、含まれている cboxElement https://dl.dropbox.com/u/8578/cbox.pngに気付きました

含まれている画像よりも大きい: https://dl.dropbox.com/u/8578/img.png

しかし、正直なところ、cboxElement が画像よりも大きく引き伸ばされる理由がよくわかりません。cbox の構成は次のようになります。

    $(".ajax1, .ajax2, .ajax3, .ajax4, .ajax5, .ajax6, .ajax7, .ajax8, .ajax9").colorbox({
        rel:"nofollow",
        transition:"none", 
        opacity:"0",  
        fixed:"true", 
        width:"65%", 
        height:"97%",
        onComplete: function() {$('.flexslider').flexslider({
            animation: "slide",
            animationLoop: true,
            controlNav: false,
            directionNav: true,
            slideshow: false
        });}        
     });

順序付けられていないリスト内の 1 つの li の html は次のようになります。

 <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>

適用された CSS は次のようになります。

 /* The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{
    position:absolute;
    top:0;
    left:0;
    z-index:300;
    overflow:hidden;
    }
 #cboxOverlay{
    position:fixed;
    width:100%;
    height:100%;}
  #cboxMiddleLeft, #cboxBottomLeft{
    clear:left;}
  #cboxContent{
    position:relative;}
  #cboxLoadedContent{
    overflow:auto;}
  #cboxLoadingOverlay, #cboxLoadingGraphic{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;}
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
    cursor:pointer;}
  #colorbox, #cboxContent, #cboxLoadedContent{
    box-sizing:content-box;}

/*  User Style:   */

#colorbox{
    @include border-radius(5px, 5px);
    @include box-shadow(black 2px 2px 10px);
    background:rgba(55, 60, 74, 0.95);
    }
 #cboxContent{
    margin:30px;
    overflow:visible;
    }
  #cboxError{
        padding:50px;
        border:1px solid #ccc;}
  #cboxLoadedContent{
        padding:0 5px 0 10px;
        }
    #cboxLoadingGraphic{
        background:url('../img/loading.gif') no-repeat center center;}
    #cboxLoadingOverlay{
        background:rgba(55, 60, 74, 0.95);}

   #cboxClose{
    text-indent:-9999px;
    width:44px;
    height:24px;
    position:absolute; 
    top:-26px;
    right:-20px; 
    background:url('../img/close.png') no-repeat 0 0;}

誰にもアイデアがありますか？ありがとう

4

1 に答える 1

0

ここでは影響がないため、この式から colorbox を削除できます。これは単なる CSS トリビアであり、インライン要素であるため、デフォルトですべての画像要素で発生します。画像要素を float に変更しdisplay:blockたり、float を与えたりすると、そのスペースが消えてしまいます。

スペースが存在する理由については、この投稿でよく説明されています。 画像の下の空白を削除します。

于 2012-10-29T05:38:20.357 に答える