0

我正在制作一个简单的幻灯片，并且我的 javascript 很容易工作。然而，布局并不顺利。当前图像以大尺寸显示，固定宽度为 80%，高度可以改变以保持其纵横比。

这样做的问题是我希望当前图像以正确的纵横比显示（它是），并且我希望右侧的缩略图栏在超出此高度时具有滚动条。

这是关于 jsfiddle 的演示：http: //jsfiddle.net/ZTBNR/1/

这是代码：

CSS

div.slideshow{
 width: 100%;
 background: #B8B8B8;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border: 1px solid #000;
 overflow: hidden;
}
div.slideshow > div.current-slide_wrapper{
 padding: 10px;
 float: left;
 width: 80%;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow: hidden;
 border-right: 1px solid #000;
}
    div.slideshow > div.current-slide_wrapper img{
     width: 100%;
     vertical-align: bottom;
     cursor: pointer;
    }
div.slideshow > div.other-slides_wrapper{
 padding: 10px 15px;
 float: right;
 width: 20%;
 height: 100%;
 display: block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow-y: auto;
 overflow-x: hidden;
}
    div.slideshow > div.other-slides_wrapper img{
     border: 5px solid #FFF;
     width: 100%;
     cursor: pointer;
     margin-left: -5px;
    }
    div.slideshow > div.other-slides_wrapper img:hover{
     border: 5px solid #EAEAEA;
    }
    div.slideshow > div.other-slides_wrapper img.current{
     border: 5px solid #000;
    }

HTML

<h3>Screenshots</h3>
<div id="slideshow-1" class="slideshow_wrapper">
 <div class="slideshow">
  <div class="current-slide_wrapper">
   <img class="current-slide" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
  </div>
  <div class="other-slides_wrapper">
   <img class="other-slide current" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
   <img class="other-slide" data-slide="2" src="/path/to/image/website-screenshot2.jpg"/>
   <img class="other-slide" data-slide="3" src="/path/to/image/website-screenshot3.jpg"/>
   <img class="other-slide" data-slide="4" src="/path/to/image/website-screenshot4.jpg"/>
   <img class="other-slide" data-slide="5" src="/path/to/image/website-screenshot5.jpg"/>
  </div>
 </div>
</div>
4

1 回答 1

1

我解决了！我将 div.slideshow 设置为display: block; position: relative;并且 div.current-slide_wrapper 不再浮动。

然后我将 div.other-slides_wrapper 设置为position: absolute; top: 0; right: 0; height: 100%;. 这非常有效！

于 2013-06-08T13:05:03.257 回答