使用CSS将div与图像底部左侧对齐

Question

我正在尝试将价格块放入现有的卡片框中。

JSFiddle链接如下：https://jsfiddle.net/g6bzkjvd/ 我的尝试代码如下：

.price {
    position: absolute;
    top: -34px;
    left: 0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

我希望橙色块左下角对齐，但它不起作用。

请问您能指点我正确的方向吗？

谢谢。

- Testy

Answer 1

最好将图像和价格放在同一个div中，并将位置设置为相对位置。我添加了一个class名称为.container-div的div并更新了CSS。

<div class="container-div">

        <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/hotel-interior-room0416.jpg?itok=5gENxAK1" class="img-fluid rounded-top" style="width: 100%">
        <div class="price">229 $</div>
    </div>

In your csss file

container-div{
  position: relative;
}

.price {
    position: absolute;
    bottom:5px;
    right:0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

我已经更新了你的fiddle，这里是最初的回答。

- Manoj

Answer 2

将 top 改为 bottom 值或 top: 139px; 如此。

.price {
    position: absolute;
    bottom: 234px;
    left: 0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

https://jsfiddle.net/viethien/0achp39n/6/

如果您想在图片高度更改时保留位置，请为图片和价格文本添加包装的div，如下所示https://jsfiddle.net/viethien/0achp39n/13/。

- Hien Nguyen

---

如果有一天我有一张图像高度不同，会发生什么？ - Testy

你应该包装一个div，其中包括图像和价格文本，并使用bottom和left。 - Hien Nguyen