html - CSS 列 : left/right split, 中间内容堆叠

Question

我的图片有问题。我想让 4 张图片看起来像这样: Image

但不幸的是，4 号图像在其余图像下方，并贴在文档的左侧。我希望它固定在 2 号和 3 号上。

这是我的代码:

<div id="images">
<div class="off1"><img src='img/off1.jpg' /></div>
<div class="off2"><img src='img/off2.jpg' /></div>
<div class="off3"><img src='img/off3.jpg' /></div>
<div class="off4"><img src='img/off4.jpg' /></div>
</div>

和CSS:

.off1
{
float: left;
display: block;
}



.off2
{

display: block;

}

.off3
{
display: block;
position: relative;
bottom: 3px;
}

.off4
{
display: inline-block;
}

感谢您的帮助!

Answer 1

为图像 div 2 和 3 添加包装元素，使 div 1 和 4 float 并给 div 3 line-height: 0 以避免 2 和 3 之间的间隙:

http://codepen.io/anon/pen/gLdOyY