我很难解释我想要什么,所以我画了一张图。
所以基本上第一个div(外部div)具有固定高度。第三个div - 蓝色 - 包含一些我不知道高度的文本,因此div应该围绕文本包裹,这意味着它具有可变高度。而第二个div - 绿色 - (应填充其余高度)包含一个图像,该图像应缩小以适合div或者如果它更小,则仅对齐到底部。我遇到的问题是图像根本不想缩小。它将始终尝试成为全尺寸,并将推出文本div#1。我尝试使用表格方法解决它,但某种方式表格忽略了外部div的固定高度。我可以接受flexbox解决方案,尽管我想避免它以支持旧浏览器。
我真的很想用css解决这个问题,因为javascript只会使事情复杂化并使其更加滞后。
.outer{
width: 100%;
height: 200px;
background-color: lightgray;
padding: 20px;
}
<div class="outer">
<div class="top">
<img src="http://themeflush.com/minimalix/demo4/wp-content/uploads/2014/08/wallpapers-for-christian-background-tumblr-photography-vintage-images-tumblr-wallpapers.jpg">
</div>
<div class="bottom">
<span>Title of the description<span>
<p>This is a long description.</p>
</div>
</div>