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

Question

我使用 Zurb 的 Foundation 6 来实现涉及图像的打印布局，该图像突出其行（参见红色边框内的图像）。第一张图片在一行内 (class="row lp-1")，另外两张图片在下一行 (class="row 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/

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

Foundation 6: how to handle images that has an vertical overflow within one row?

html

css

zurb-foundation