如何填补高度的div

Question

这是fiddle我希望在右列中填入这些div来填充高度。所以第一个div应该从顶部开始，最后一个应该从底部开始，每个div之间的空间是相同的。我怎样才能做到这一点？

 <div>
<div class="left">
<img src="http://serwer1307713.home.pl/bg.png" />
</div>

<div class="right">
<img src="http://serwer1307713.home.pl/bg-2.png" />
     <img src="http://serwer1307713.home.pl/bg-2.png" />
     <img src="http://serwer1307713.home.pl/bg-2.png" />
     <img src="http://serwer1307713.home.pl/bg-2.png" />
</div>

这就是我希望它看起来像

的方式

我忘记添加一个重要信息，我需要它才能做出响应;）

Answer 1

我认为这就是您的意思，您的图片无法到达页面末尾？ 将其添加到CSS文件中：

body {
padding:0;
margin:0;

}

Answer 2

这并不容易，但我认为我做到了：http://jsfiddle.net/Whre/X3vKd/2/

我添加了一些包装div并使用：before和：after伪元素以强制执行相同的高度：

.wrapper {
    position:relative;
    display:inline-block;
}

.wrapper:after {
    content:".";
    display:block;
    visibility:hidden;
    height:0;
}    

Answer 3

为你的html和你自己的div分配一个height属性，然后你可以手动指定右边或左边div中图像的高度，如下所示：

.left img {
    height: 42%;
}

.right img {
    height: 10%;
}

html, body {
    height: 100%;
}

小提琴：http://jsfiddle.net/y8sw9/4/

Answer 4

我用js完成了这个。看一看 jsfiddle.net/y8sw9/6 /