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

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

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

1 个答案: