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

Posted 2023-03-06

【中文标题】CSS - Div获取父级的剩余宽度空间

【英文标题】：CSS - Div get remainder width space of parent

【发布时间】：2017-04-30 15:37:38

【问题描述】：

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

【参考方案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="" ></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 一个元素向左/向右，并且您希望下一个兄弟元素占据全部空间，那么此属性适合您。