我有一个没有指定宽度的标题/容器(因此它与父容器一样长)。在里面,我有两个较小的 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;
}
现在有点乱,因为我刚刚尝试了很多东西,这是最后一件事。