如何在无JS情况下让父容器包裹固定宽度子元素且右侧无空白？

嘿，这个问题我之前也碰到过！咱们先搞清楚根源，再一步步解决～

问题原因 #

你给父容器用了display: inline-block，它的宽度计算逻辑是取子元素不换行时的总宽度——哪怕最后一个子元素已经自动换行了，容器还是会保留那个“原本应该的最大宽度”，这就导致右侧出现了多余空白。

解决方案 #

下面给你几个实用的解决办法，按推荐程度排序：

1. 使用width: fit-content（推荐，现代浏览器友好） #

给父容器添加width: fit-content属性，它会让容器自动收缩到实际内容占据的宽度（也就是换行后的宽度），完美消除右侧空白，同时保留子元素固定宽度、自动换行的特性。

修改后的容器CSS代码：

div.container {
  color: white;
  background: black;
  margin: auto;
  padding: 1em;
  display: inline-block;
  width: fit-content; /* 关键属性，解决空白问题 */
}

2. 改用Flexbox布局 #

如果需要兼容一些较老的浏览器，或者想利用Flex的其他特性，可以把容器改成Flex布局，配合flex-wrap: wrap实现自动换行，再加上width: fit-content让容器宽度贴合内容：

div.container {
  color: white;
  background: black;
  margin: auto;
  padding: 1em;
  display: flex;
  flex-wrap: wrap; /* 开启自动换行 */
  width: fit-content;
}

3. 手动计算宽度（不推荐，灵活性差） #

如果子元素的数量和宽度完全固定，也可以手动计算容器的宽度（比如每行能放3个宽度100px的子元素，就设容器宽度为3*100px + 内边距等），但这种方法不够灵活，子元素数量变化时就得修改代码，所以只适合固定场景。

效果验证 #

添加width: fit-content后，父容器的宽度会根据换行后的实际内容自动调整，右侧的多余空白会彻底消失，同时子元素的固定宽度和自动换行需求也能完全满足～

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