Как создать блок, размер которого не изменяется по ширине?

Question

У меня такая ситуация:

<div>
  <a href="#"><img alt="" src="img.jpg"></a>
</div>

div { width: 200px; }
a { display: block; width: auto; }

То, что я ожидаю, - это минимально необходимая ширина для данного элемента "a" - в этом случае ширина изображения. Но вместо этого я получил «а» с шириной 200 пикселей. Как предотвратить это изменение размера?

Answer 1

block элементы занимают ширину своего родителя по определению, если явно не переопределены определенной шириной с определенными единицами. Вы не можете иметь его свободно плавать до ширины его содержимого. Рассмотрим inline.