2

次の HTML があるとします (まあ、haml ですが...):

.container
  .row
    .span4
      %h1
      %p
      %img
    .span4
      %h1
      %p
      %img
    .span4
      %h1
      %p
      %img

したがって、各列にはヘッダー、テキスト、画像があります。画像が次のように行われたかのように垂直に整列する方法はありますか:

.container
  .row
    .span4
      %h1
      %p
    .span4
      %h1
      %p
    .span4
      %h1
      %p
  .row
    .span4
      %img
    .span4
      %img
    .span4
      %img

しかし、新しい行を作成せずに? その理由は、画像をヘッダーとテキストでグループ化して、モバイル/タブレット レイアウトで画像が一致するコンテンツでレイアウトされるようにするためです。一方、2 番目のケースでは、3 つになりますテキストのグループと 3 つの画像。

4

1 に答える 1

5

私は2つのアプローチを考えることができます:

いずれにせよ、img-outer特定のケースでは必要ない場合があります。

<div class="container">
    <div class="row">
        <div class="span4">
            <h1></h1>
            <p></p>
            <div class="img-outer"><img src="" /></div>
        </div>
        <!-- ... -->
    </div>
</div>

高さ制御

テキスト要素以上に固定の高さ を設定するh1とp、画像が整列されます。

に固定の高さを設定し、.span絶対配置を使用することもできます。これを以下に示します。

.container .row [class*="span"] {
    height: 100px;
    padding-bottom: 150px;
    position: relative;
}
.container .row [class*="span"] .img-outer{
    height: 150px;
    line-height: 150px;
    vertical-align: middle;
    position: absolute;
    bottom: 0;

    /* Take the whole width */
    left: 0;
    right: 0;
}

デモ (jsfiddle)

その他のポジショニング

結果がクロスブラウザーであることを保証するのに十分な絶対的なポジショニングの知識がありません。

.container .row {
    padding-bottom: 150px;
    position: relative;
}
.container .row [class*="span"] .img-outer{
    height: 150px;
    line-height: 150px;
    vertical-align: middle;
    position: absolute;
    bottom: 0;

    /* Take the whole width */
    width: 300px; /* .span4 width */
}

デモ (jsfiddle)

于 2012-07-06T20:38:41.310 に答える