Question

我正在制作一个简单的幻灯片，我的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>

Answer 1

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

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

浮动div 100％父内联块div的高度

1 个答案: