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

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

编辑 Here's the 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演示。