html - 将元素设置在行的垂直中间

Question

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

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

请注意，相对于 columns-10 中的文本，columns-2 中的行是如何均匀分布（垂直）的。

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

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

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演示。