CSS：设置宽度精确等于内容

Question

我正在寻找一种方法，将div设为宽度最大的孩子。

情况：

<container>
  <div1></div1>
  <inner_container>
    <item1>
    <item2>
    <item3>
    ...
  </inner_container>
</container>

https://jsfiddle.net/hmman06s/1/

注意：

item width is fix (using background image)
item margin is fix
container width is in %

现在我想要的是，div1的宽度与inner_container的项目一样。 就像在这张图片中一样：

但是使用inline-block，取决于屏幕宽度，我会得到这样的结果： 看到绿色的额外空间：

这是一种仅限css的方式吗？

感谢您的帮助！

Answer 1

您可以使用CSS @media查询来实现您所需的效果。

如果container 24px宽度小于viewport宽度且inner_container 120px宽度小于container，则inner_container总是144px的宽度不会比viewport宽。{/ p>

如果您的商品为80px宽并且10px的任一边都有边距，则每次内部宽度达到inner_container时，您只需要展开{​​{1}} {1}}。

如果我们在项目行的左侧和右侧添加100px的填充（使12px另一个inner_container更宽），我们现在有足够的信息来计算所有24px断点：

1. 十件商品需要 1168px 的视口（10 x 100px + 24px + 144px）
2. 九项需要 1068px 的视口（9 x 100px + 24px + 144px）
3. 八项需要 968px 的视口（8 x 100px + 24px + 144px）
4. 七项需要 868px 的视口（7 x 100px + 24px + 144px）
5. 六项需要 768px 的视口（6 x 100px + 24px + 144px）
6. 五项需要 668px （5 x 100px + 24px + 144px）的视口

因此：

viewport

Answer 2

希望这会对你有所帮助。在你的风格改变这些宽度

.icon {
  display: inline-block;
  background-color: grey;
  width:100%;
}

.item {
  width:9%;
  height: 50px;
  display: inline-block;
  margin-left:0.09%;
  background-color: red;

}

注意：这是一个简单的逻辑，你要做的就是 在您的案例item-width= full-width/number_of_items_you_want

中item_width = 100/11