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

Question

我正在尝试将 div 对齐到容器的左下角：

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

现在，我将徽标（橙色 div）设置为{float:right; width: 30%}，因此内部图像的宽度不会超过 div。

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

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

任何帮助将不胜感激，因为我将了解更多关于 css 的信息。

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

EDIT2：我当前的代码： //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/

Answer 2

你试过这个css属性吗

bottom:0
left:0

---

更新：

   position: relative;