css - 使用 CSS 对齐图像左下角的 div

Question

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

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

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

你能给我指出正确的方向吗？

谢谢。

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>

在你的css文件中

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