避免手动写入图片宽度

Question

我在属性 class 中写了图片宽度，以便将价格放在距图片右边缘15 像素的位置。现在 right 工作正常，但如果我删除它，价格将被放置在距页面右边缘 15px 的位置..

html:

<div class = "property">
    <img src = "http://preview.byaviators.com/template/realia/assets/img/tmp/property-small-1.png"/>
    <div class = "type">House</div>
    <div class = "price">90 000 €</div>
</div>

css:

.property {
    position: relative;
    width: 270px;
}
.price {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

你能建议一种方法吗？在这种方法中，我可以避免写图片的宽度，而右边可以正常工作？谢谢，p.s。 code

Answer 1

你可以试试这个https://jsfiddle.net/ht80y82y/1/

CSS

.property {
  display: inline-block;
  position: relative;
  width: auto;
}

Answer 2

div 元素（.property）默认有 display:block;。这意味着元素宽度将从其父元素继承。但是，您可以通过给出 display:inline-block; 等来解决您的问题。

Jsfiddle

或将div更改为span。

Jsfiddle

避免手动写入图片宽度

avoid writing width of picture manually

html

css

absolute