如何让容器仅占用inline-block子元素换行所需的必要空间？

我太懂你这种纠结了——那些多余的容器宽度看着真闹心！之前查的方案都默认每行子元素数量固定，完全不贴合咱们这种需要自适应换行、还得用百分比max-width的场景。直接上解决方法，附带原理说明：

核心解决方案（inline-block子元素版） #

关键是把父容器从「强制占满宽度」的block元素，改成「收缩包裹内容」的容器，同时修正子元素的宽度计算逻辑：

修改后的CSS代码 #

html, body { 
  background-color: #eee; 
  height: 100%; 
  width: 100%; 
  padding: 0; 
  margin: 0; 
}
.container { 
  display: inline-block; /* 改成inline-block，自动收缩到内容宽度 */
  /* 删掉原来的width:100%，这是多余空间的根源 */
  background: rgba(255,0,0,0.1); /* 加个半透明背景方便你直观查看容器宽度 */
}
.box { 
  display: inline-block; 
  max-width: 30%; /* 生产环境用百分比，这里示例用30% */
  padding: 20px; 
  margin: 20px; 
  background-color: #fff; 
  border: 1px solid #ddd; 
  box-sizing: border-box; /* 必须加！让padding/margin包含在宽度计算里，避免百分比宽度失效 */
}
.img-wrapper { }
.img-wrapper span { 
  display: inline-block; 
  position: relative; 
  overflow: hidden; 
  width: 128px; 
  height: 128px; 
  border-radius: 10px; 
}
.img-wrapper img { 
  max-width: 196px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translateX(-50%) translateY(-50%); 
}

原理说明 #

1. 移除width:100%：原来的这个属性强制.container占满父级（body）的宽度，不管子元素实际需要多少空间，这就是多余空间的来源。
2. display: inline-block：让.container变成「收缩容器」，它的宽度会自动适配内部.box换行后的最大行宽——比如视口够宽时能放3个.box，容器宽度就是3个.box的总宽度；视口变窄后只能放2个，容器宽度也会跟着缩小到2个.box的总宽度，完全没有多余空间。
3. box-sizing: border-box：这个属性确保.box的padding和margin被包含在它的宽度计算里，避免你设置的百分比max-width因为额外的内边距/外边距而「超标」，保证宽度计算准确。

浮动子元素的替代方案 #

如果你想用浮动元素代替inline-block，只需要调整.container和.box的属性：

.container { 
  display: flow-root; /* 清除浮动并自动包裹内容，同时收缩宽度 */
  background: rgba(255,0,0,0.1);
}
.box { 
  float: left; /* 改成浮动 */
  max-width: 30%; 
  padding: 20px; 
  margin: 20px; 
  background-color: #fff; 
  border: 1px solid #ddd; 
  box-sizing: border-box;
}

display: flow-root是现代浏览器清除浮动的最佳方式，它会让.container自动包裹所有浮动的子元素，同时保持收缩宽度的特性。

额外提示：视口相关的百分比max-width #

如果你的.box的max-width是想参考视口宽度（而不是父容器宽度），可以把max-width: 30%改成max-width: 30vw（vw是视口宽度的单位，1vw=视口宽度的1%），这样.box的最大宽度直接和视口绑定，适配性更强。

内容的提问来源于stack exchange，提问作者Leo