CSS - Div获取父级的剩余宽度空间答案

【问题标题】：CSS - Div get remainder width space of parentCSS - Div获取父级的剩余宽度空间
【发布时间】：2023-04-08 01:49:02
【问题描述】：

我正在尝试制作类似的响应式内容图片在较小的屏幕上保持在该宽度上，我希望文本占据剩余空间以使其 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。任何帮助表示赞赏！ :)

【问题讨论】：

标签： html css responsive-design position width

【解决方案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>

【讨论】：

谢谢它的工作！ :) 如果您不介意，您能解释一下为什么它可以与溢出一起使用吗？
@Rosiana 接受答案，这对你有用吗
@Rosiana overflow: hidden 属性设置div 的布局，如果添加更多内容，它不会下降。简而言之，如果您将float 一个元素向左/向右，并且您希望下一个兄弟元素占据全部空间，那么此属性适合您。