1

私のグリッドでは、次のようなことをしたいと思っています:

[main row]
|[columns-10]                     |[columns-2][row]"above img"|
|   Some text                     |                           |
|   here, on                      |[row]            image here|
|   multiple                      |                           |
|   lines                         |[row]           "below img"|
|   ...                           |                           |

列 10 のテキストに対して、列 2 の行が (垂直方向に) 均等に配置されていることに注意してください。

Zurb は私を近づけますが、列 2 内の行は外側の行の高さを認識していないようです。

これが私の（haml）コードです：

.row
  .columns.large-10
    %p #{"It does work on all browsers " * 20 }
  .columns.large-2
    .row.right
      .columns.large-12
        above img
    .row.right
      .columns.large-12
        %img{ src: "http://www.gravatar.com/avatar/4d1795fc22c16e533fd1d11fae39fef8.png",
              alt: "Baboon's logo" }
    .row.right
      .columns.large-12
        below img



編集: これは、JSFiddleがウィンドウのサイズを変更して、画像が大きなテキストの中央の高さにあるのではなく、左上隅にどのようにとどまるかを確認する方法です。

4

1 に答える 1

0

RoR アプリケーションに jQuery ライブラリを含め、HAML コードを変更し、以下の JS コードを含む JS ファイルを追加する必要があります。

HAML コード:

.row
  .columns.large-10
    %p #{"It does work on all browsers " * 20 }
  .columns.large-2
    .row.right
      .columns.large-12
        above img
    .row.right#image-container
      .columns.large-12
        %img{ src: "http://www.gravatar.com/avatar/4d1795fc22c16e533fd1d11fae39fef8.png",
              alt: "Baboon's logo" }
    .row.right
      .columns.large-12
        below img

jQuery ライブラリを使用した JS コード:

var height=$('#image-container').parent().siblings().height();
var above_height=$('#image-container').siblings().height();
$('#image-container').find('img').height(height-2*above_height)

これがJSFiddleデモです。

于 2013-10-07T05:57:46.330 に答える