基础6：如何处理一行内有垂直溢出的图像？

Question

我使用Zurb的Foundation 6来实现一个涉及图像的打印布局，该图像从其行中伸出（参见红色边框内的图像）。 第一个图像在一行内（class =“row lp-1”），另外两个图像在下一行内（class =“row lp-2”）。

SequenceContainer

问题是，当我更改我的视口时，同一行中的第二个图像会垂直移动一点，以便底部不在同一水平线上，看到蓝色边框中标记的错位。

我的HTML：

.lp-2 {
  margin-top: -8rem;
  img { margin-top: 3.9rem; }
}
.offset4y {margin-top: 4rem;}
.offset-10y { margin-top: -10rem; }

我的CSS：

Remaining[i+1] = Remaining[i] - Principal[i];

我该如何解决这个问题？

Answer 1

我可以使用新的Flexbox属性来解决这个问题：

CSS：

// Flexbox vertical alignment to bottom
.va-bottom { align-self: flex-end; }

HTML：

      <div class="large-6 column va-bottom">
        <%= image_tag("landing_page_3", alt: "landing page 1") %>
        <p class="article-header">
          Men Shirt Print
        </p>
        <p class="article-text">
          shop now
        </p>
        <hr class="article"/>
      </div>

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/