html - 让 div 填满父级的其余部分

Question

我有一个没有指定宽度的页眉/容器(因此它和父容器一样长)。在里面，我有两个较小的 div。现在，第一个应该只包含一张图片(具有固定大小)，另一个应该与剩余空间一样大。我不能使用设置的宽度，因为我不知道页眉的宽度。 我如何使用纯 CSS 做到这一点？

我最终想要的是一张图片，然后是一些与右上角对齐的文本，然后是一些与左侧图片底部对齐的文本。 您知道执行此操作的更好方法吗？

这里有一张图，这样更容易理解:

谢谢，亚历山大

编辑 1:

HTML:

<div class="header">
  <div class="header_left">
    <div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
  </div>
  <div class="header_right">
    <div class="time">18m ago</div>
    <div class="name">Volkswagen</div>
  </div>
</div>

CSS:

.header {
}

.header_left {
  display: inline-block;
}   
  .pic {
    margin: 5px;
  }

.header_right {
  display: inline-block;
}
  .time {
    margin: 5px;
    float: right;
  }
  .name {
    margin: 5px;
    float:left;
  }

现在有点乱，因为我一直在尝试很多东西，这是最后一件事。

Answer 1

如果你显示你的 html 会更容易。这是一个基于您的描述的示例。你可以在这里看到这个在 fiddle 中的工作 http://jsfiddle.net/Z68ds/18/

.header {
    overflow:hidden;
    padding: 4px;
    background: #ddd;
}

.caption {
    float: right;
    font-size: 0.9em;
}

.avatar {
    float: left;
}

.title {
    margin: 14px 0 0 38px;
}

<div class="header">
    <div class="caption">
        texty text2
    </div>
    <img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
    <div class="title">texty text1</div>
</div>