在行的垂直中间设置元素

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 让我接近，但 columns-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

编辑：Here's the JSFiddle 尝试调整窗口大小并查看图像如何保持在左上角而不是位于大文本的中间高度。 p>

Answer 1

您需要在您的 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

带有 jQ​​uery 库的 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 演示。