CSS

Question

我正在尝试制作这样的响应式内容图片在较小的屏幕上保持该宽度，我希望文本占据剩余部分 space 以使其成为父级的 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;
}

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

<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>

CSS - Div 获取父级的剩余宽度 space

CSS - Div get remainder width space of parent

html

position

width

responsive-design