浮动div父行的高度100％inline-block div [英] Floated div 100% height of parent inline-block div

问题描述

我正在做一个简单的幻灯片，我有javascript工作非常容易。然而布局不是很好。当前图像显示为大，固定宽度为80％，高度可以更改以保持其高宽比。

I am making a simple slideshow and I have got the javascript working very easily. However the layout is not going as well. The current image is display in big with a fixed width of 80% and the height can change to keep its aspect ratio.

这个问题是我想要的当前图像以其正确的宽高比（它是）显示，并且我想要右侧的缩略图栏有一个滚动条，如果它溢出这个高度。

The problem with this is that I want the the current image to be displayed in its correct aspect ratio (which it is) and I want the thumbnail bar on the right to have a scrollbar if it overflows this height.

以下是jsfiddle的演示： http：// jsfiddle.net/ZTBNR/1/

Here is a demo on 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>

推荐答案

我设置div.slideshow到 display：block; position：relative; 和div.current-slide_wrapper不再浮动。

I solved it! I set div.slideshow to display: block; position: relative; and div.current-slide_wrapper is no longer floated.

然后我将div.other-slides_wrapper设置为 position：absolute; top：0; right：0; height：100％; 。这工作完美！

I then set div.other-slides_wrapper to position: absolute; top: 0; right: 0; height: 100%;. This worked perfectly!

这篇关于浮动div父行的高度100％inline-block div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！