基础6:如何处理在一行中存在垂直溢出的图像？

Question

我使用Zurb的Foundation 6实现了一个包含图像的打印布局，该布局突出在其行外(参见红色边框内的图像)。第一个图像位于一行内(class=“行lp-1")，另两个图像位于下一行(class=”行lp-2")内。

​

​

问题是，当我改变我的视图时，同一行中的第二个图像垂直移动一点，这样底部就不在同一条水平线上，看到蓝色边框中标记的不对齐。

​

​

我的HTML：

    <div class="row lp-1">
      <div class="large-12 column">
        <%= image_tag("landing_page_1", alt: "landing page 1") %>

      </div>

    </div>

    <div class="row lp-2">
      <div class="large-1 column"></div>
      <div class="large-4 column offset-12y">
        <%= image_tag("landing_page_2", alt: "landing page 1") %>
        <p class="article-header">
          Denim & Embroidery
        </p>
        <p class="article-text">
          shop now
        </p>
        <hr class="article"/>
      </div>
      <div class="large-6 column offset4y">
        <%= 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>
      <div class="large-1 column"></div>
    </div>

我的CSS：

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

我怎么才能解决这个问题？

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/