因此,我终于设法使此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%;
}