html - 将容器类的高度设置为图像的高度

Question

我试图让容器类 .external-link 成为图像的高度，而不是更高或更低。

<p class="external-link"><img src="http://www.vernmccraylaw.com/files/stacks_image_1241.jpg" alt="img_58c1b29bb1309"><strong>Related Articles</strong>Some text’n’stuff for yo clickage.</p>


.external-link {
  background-color: #ddd;
  height: 200px;
  border: 1px solid $grey;
  font-family: 'Open Sans';
}

.external-link img {
  float: left;
  width: 200px;
  padding-right: 20px;
}

.external-link strong {
  display: block;
  font-family: 'Open Sans Condensed';
}

我知道解决方案应该很简单，我只是画了一个空白。

JSFIDDLE:LINK

Answer 1

从 .external-link 中删除 height 并添加 overflow: auto 以清除 float img.

.external-link {
  background-color: #ddd;
  border: 1px solid $grey;
  font-family: 'Open Sans';
  overflow: auto;
}

.external-link img {
  float: left;
  width: 200px;
  padding-right: 20px;
}

.external-link strong {
  display: block;
  font-family: 'Open Sans Condensed';
}

<p class="external-link"><img src="http://www.vernmccraylaw.com/files/stacks_image_1241.jpg" alt="img_58c1b29bb1309"><strong>Related Articles</strong>Some text’n’stuff for yo clickage.</p>