将图像的div左下角与CSS对齐

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;
}

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

你能告诉我正确的方向吗？

谢谢。

Answer 1

如果你把图片和价格放在同一个div中，并给出相对位置，那就更好了。我已经添加了一个类名为.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>

在csss文件中

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 here

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/