让div填充父母的其余部分

Question

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

我最终想要的是一张图片，然后一些文字与右上角对齐，然后一些文字与左边图片的底部对齐。 你知道有什么更好的方法吗？

这是一张图片，因此更容易理解：

谢谢，Aleksander

编辑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会更容易。以下是基于您的描述的示例。你可以在这里看到这个小提琴 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>

Answer 2

您必须在元素中使用overflow，而不想设置宽度而不浮动。

#left {
  float: left;
  width: 100px;
}

#right {
  overflow: hidden;
}

这将强制#right元素覆盖其父级的其余部分。不需要额外的标记。

Answer 3

这是你想要达到的目标吗？

<div id="header">
  <img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
  <p id="textRight">texty text2</p>
  <p id="textLeft">texty text1</p>
  <div class="clearer"></div>
</div>

/* CSS */

#logo {
    float: left;
}
#textRight {
    float: right;
}
#textLeft {
    clear: right;
    float: left;
}
.clearer {
    clear: both;
}

这是一个小提琴：

http://jsfiddle.net/T26cD/