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

You have to use overflow in the element you don't want to set a width without floating it.

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

#right {
  overflow: hidden;
}

This will force the #right element to cover the rest of its parent. No extra markup needed.

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/