html - 使用相邻的固定大小的 div 使 div 填充空间

Question

我试图将一个 div 对齐到容器的左下角:

绿色的是里面的主体容器。黄色是header div，里面是logo和title。

现在，我得到了标志(橙色 div)到 {float:right; width: 30%} ，所以里面图片的宽度不会超过div。

蓝色的有问题。我希望它与橙色(取决于图像)高度相同，并填充我们其余的空间。 (正如你在图片中看到的那样)。此外，我希望蓝色 div(标题)的文本与左下角对齐。

我尝试了各种绝对位置、父/子相对位置以及设置顶部和底部。使用固定高度可行，但 div 需要与图像 div 具有相同的高度。

任何帮助将不胜感激，因为我将学习更多关于 css 的知识。

编辑:图像的宽度将取决于样板，图像的尺寸不固定。标题将包含一个 css 格式 <h1>和一个 <span>用于图标。

EDIT2: 我当前的代码:http://jsfiddle.net/QxK9U/

Answer 1

如果将图像 div 包裹在标题 div 中，则标题 div 将具有相同的高度，除非它的内容比图像 div 多。

<div class="header">
    <div class="title">
        <div class="image"><img src="http://placekitten.com/200/250"></div>
    </div>
</div>

http://jsfiddle.net/Gc5qz/1/