CSS - Div得到父级的余数宽度空间

Question

我正在尝试制作像这样的响应式内容 图片在较小的屏幕上保持在该宽度上，我希望文本占据剩余空间，使其成为父母的100％。

到目前为止，我尝试了这个但是没有用。

<div class="comment">
   <div class="image"><img>Image here</img></div>
   <div class="text">Contents</div>
</div>

.comment {
   width: 100%;
}
.image {
   width: 50px;
   float: left;
}
.text {
   float: left;
}

我对jQuery解决方案持开放态度，但仅限于CSS。任何帮助赞赏！ ：）

Answer 1

删除float并添加overflow: hidden，即

.text {
  overflow: hidden;
}

＆＃13;

＆＃13;

.comment {
  width: 100%;
}
.image {
  margin-right: 15px;
  width: 50px;
  float: left;
}
.text {
  overflow: hidden;
}

＆＃13;

<div class="comment">
   <div class="image"><img src="" alt="Image here"></div>
   <div class="text">Contents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes here</div>
</div>

＆＃13;

＆＃13;

＆＃13;