2

所以我终于设法让这个 CSS Accordion 主要按照我想要的方式工作。然而，还有一个奇怪的琐碎问题，我似乎无法确定。

这是手风琴的 JS Fiddle：http: //jsfiddle.net/RahpC/

现在，如果您从底部接近幻灯片，您可以看到它们在大约 200 像素外（至少在我的屏幕上）受到影响。

同样的问题导致手风琴在放入页面时在其下方有很多“空白”。最初有 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%;
}

一如既往地感谢任何帮助。

乔恩。

4

1 回答 1

1

只需删除

#vertical:hover li{

    height:10%;
}
于 2013-06-04T11:03:12.907 回答