我有一个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;}
有人有想法吗?谢谢
答案 0 :(得分:0)
您可以从此等式中删除colorbox,因为它在此处没有任何影响。这只是CSS琐事,默认情况下会出现所有图像元素,因为它们是内联元素。如果您要将图像元素更改为display:block
或将其设置为浮动,则该空间将消失。
至于空间的原因,这篇文章解释得很好: Remove white space below image