Question

我有一个3x3矩阵的9个图像用Susy构建。我只是想知道为什么垂直排水沟不像我建议的那样。然后我意识到包含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
        });}        
     });

无序列表中的一个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;}

有人有想法吗？谢谢

Answer 1

您可以从此等式中删除colorbox，因为它在此处没有任何影响。这只是CSS琐事，默认情况下会出现所有图像元素，因为它们是内联元素。如果您要将图像元素更改为display:block或将其设置为浮动，则该空间将消失。

至于空间的原因，这篇文章解释得很好： Remove white space below image

为什么cboxElement的高度比调用它的图像/按钮大？

1 个答案: