因此,我终于设法使此CSS手风琴按我的意愿进行了大部分工作。但是,还有一个奇怪的小问题,我似乎无法确定。

这是带有手风琴的JS小提琴:http://jsfiddle.net/RahpC/

现在,如果您从底部接近幻灯片,则可以看到它们受到大约200px距离的影响(至少在我的屏幕上)。

同样的问题也导致手风琴放入页面后在其下方有很多“空白”。最初有5张幻灯片,这似乎让我觉得沿着这条线的某个地方仍然假设还有5张幻灯片。

在我来这里问之前,我已经尽我所能地使用了尽可能多的高度设置(%s)和尺寸(像素),它们似乎丝毫不影响此“空白”。

这又是CSS,因为JSFiddle链接需要代码,因此我已经删除了我确定不会影响任何内容的区域:

/*------------------------------------*\
    MAIN
\*------------------------------------*/
html{
    font-family:Calibri, Arial, sans-serif;
    background:url(http://dl.dropbox.com/u/2629908/adaptive/img/css/grid.png) top center repeat-y #fff;
    background:#fff;
    color:#666;
    height:101%;
    font-size-adjust:0.45;
}
h1{
    font-weight:bold;
    font-size:2em;
}
h2{
    font-weight:bold;
    font-size:1.5em;
}
small{
    color:#ccc;
}
a{
    color:#6b0c36;
    text-decoration:none;
    font-weight:bold;
}
a:hover{
    text-decoration:underline;
}
p{
    margin-bottom:20px;
}

/*------------------------------------*\
    ACCORDION
\*------------------------------------*/
.accordion{
    width:700px;
    overflow:hidden;
    list-style:none;
    margin-bottom:10px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.25);
}
.accordion li{
    float:left;
    width:20%;
    overflow:hidden;
    height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
    -o-transition:width 0.2s ease-out;
    transition:width 0.2s ease-out;
}
.accordion li:first-of-type{
    -moz-border-radius:10px 0 0 10px;
    -webkit-border-radius:10px 0 0 10px;
    -o-border-radius:10px 0 0 10px;
    border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
    -o-border-radius:0 10px 10px 0;
    border-radius:0 10px 10px 0;
}
.accordion div{
    padding:10px;
}
.accordion:hover li{
    width:10%;
}
.accordion li:hover{
    width:60%;
}
.slide-01   { background:#139fec; color:white; }
.slide-02   { background:#118fd4; color:white; }

/*------------------------------------*\
    VERTICAL
\*------------------------------------*/

#vertical{
    width:700px;
    height:300px;
}
#vertical li{
    height:14%;
    width:100%;
    -moz-transition:height 0.2s ease-out;
    -webkit-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    -o-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    -o-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
#vertical:hover li{
    height:10%;
    width:100%;
}
#vertical li:hover{
    height:60%;
    width:100%;
}


任何帮助一如既往。

乔恩

最佳答案

只需删除

#vertical:hover li{

    height:10%;
}

10-07 19:14
查看更多