在行的垂直中间设置元素。

Question

在我的网格里，我想做这样的事情：

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

请注意列-2中的行是如何相对于列-10中的文本平均间隔(垂直)的。

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试图调整窗口的大小，看看图像如何停留在左上角，而不是处于大文本的中间高度。

Answer 1

您需要在您的jQuery应用程序中包含RoR库，并更改RoR代码，并使用下面的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演示。