0

レスポンシブ行レイアウトで 1 つの画像の隣に 3 つの画像を配置したいのですが、この行の内容を同じ高さにする方法がわかりません。「大きな画像は900x1200px、3つの小さな画像は300x500px」のように単純であれば、画像を任意のサイズにすることができます。これにも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>
4

1 に答える 1

0

これで始められるはずです：

<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>
于 2013-09-12T14:41:15.143 に答える