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

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能清晰地在img的float。

.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>