CSS 底部对齐在 Safari 中不起作用

Question

我正在使用 foundation 6。我有两列，每列有一张图片。我需要将第二张图片放在 div 的底部（即与第一列的底部对齐）。

我有以下 CSS:

.vertical-wrapper {
  position: relative;
}

.entry-content img.duck{
  position:absolute;
  bottom:0%;
  right:1%;
  max-width: 25%;
}

这是 html

  <div class="small-3 column vertical-wrapper">
    <img class="bottle" src="https://..." width="222" height="900" />
  </div>

  <div class="small-9 column vertical-wrapper">
      <img class="duck" src="https://..." width="200" />
  </div>

</div>

这在 IE、Firefox 和 Chrome 中有效，但在 Safari 中无效。这似乎来自第二列，它在所有浏览器中占据了全高，但在 Safari 中却没有...

这是一个活生生的例子：https://lagalope.com/test-2/

Answer 1

您需要 offset 第二个 small-9 div 添加 small-offset-3 class:

<div class="small-3 column vertical-wrapper">
   <img class="bottle" src="https://..." width="222" height="900" />
</div>

<div class="small-9 small-offset-3 column vertical-wrapper">
    <img class="duck" src="https://..." width="200" />
 </div>

Answer 2

我在行上设置了相对位置，而不是在两列上设置：

<div class="row vertical-wrapper">

    <div class="small-3 column">
        <img class="bottle" src="https://..." width="222" height="900" />
    </div>

    <div class="small-9 column">
        <img class="duck" src="https://..." width="200" />
    </div>

</div>

不确定为什么这在 Safari 中与在其他浏览器中的工作方式不同...

Answer 3

我尝试删除 img.duck 并将其替换为 .duck 可以试试吗？

.entry-content .duck{
position:absolute;
bottom:0%;
right:1%;
max-width: 25%;
}

CSS 底部对齐在 Safari 中不起作用

CSS Align on the bottom doesn't work in Safari

css

position

zurb-foundation