我有 2 个东西共享部分 - 一个由文本组成的标题和一个浮动到其右侧的图像。我希望图像宽度始终为 308px,并根据文本长度的需要裁剪其高度。我对为 .location 设置固定高度不感兴趣,因为内容长度可能会改变。如何才能做到这一点?(谢谢!)
的HTML:
<section class="location">
<img src="http://evinwolverton.com/img/disc.jpg">
<header>
<h2>This Is A Headline</h2>
Etiam porta sem malesuada magna<br/>
Mollis euismod. Duis mollis<br/>
Est non commodo luctus, nisi erat<br/>
Porttitor ligula, eget lacinia odio<br/>
Sem nec elit.
</header>
</section>
CSS:
.location {
border: 2px solid #ccc;
overflow: hidden;
width: 620px;
color: #666;
margin: 40px 0;
}
.location header {
float: left;
padding: 25px;
width: 258px;
}
.location h2 {
margin: 0 0 10px 0;
font-size: 1.2em;
color: #333;
}
.location img {
float: right;
width: 308px;
}