Question

我正在与基金会6合作。我有两列，每列有一个图像。我需要将第二个图像放在div的底部（即与第一列的底部对齐）。

我有以下CSS：

这是html

for( int i=0;i<10;i++)
{
    for(int j=0;j<10;j++)
    {
        values[i][j] = (i + 1)*(j + 1);
    }
}

这适用于IE，Firefox和Chrome，但这在Safari中不起作用。看来这是来自第二列，它在所有浏览器中占据了全部高度，但在Safari中却没有......

以下是一个实例：https://lagalope.com/test-2/

Answer 1

通过添加small-9类，您需要offset第二个small-offset-3 div：

<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中不起作用

3 个答案: