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

从height移除.external-link并添加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>

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

1 个答案: