height - 2 列网格，多行合二为一。如何使它们的高度相等？

Question

我想在响应式行布局中将 3 个图像放在一个图像旁边，但我不知道如何使该行的内容高度相等。如果像“大图像应该是 900x1200 像素，3 个小图像应该是 300x500 像素”这样简单，我可以制作任何尺寸的图像，我也为此使用了foundation4。图像也可以被裁剪或拉伸一点。

http://jsfiddle.net/uEyCF/2/

<div id="image_box">

  <div class="col">
    <img src ="http://placehold.it/200x100" />
    <img src ="http://placehold.it/200x100" />
    <img src ="http://placehold.it/200x100" />
  </div>

  <div class="col">
    <img src ="http://placehold.it/200x350" />
  </div>

</div>

Answer 1

这应该让你开始：

<div id="image_box" class="row">
    <div class="small-6 large-6 columns left-col">
        <div class="row">
            <div class="large-12 columns">
                <img src="http://placehold.it/200x100"  />
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <img src="http://placehold.it/200x100" />
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <img src="http://placehold.it/200x100" />
            </div>
        </div>
    </div>

    <div class="small-6 large-6 columns">
        <img src="http://placehold.it/200x340" />
    </div>
</div>

<style type="text/css">
.left-col img { margin-bottom:20px; float:right;}
</style>