有没有一种方法可以使元素的宽度以固定的增量增加？

Question

比较难解释我想要实现的效果…我想要一个容器元素，具有以下特点：

• 根据内容自动调整大小
• 但只能以固定增量调整大小——例如 150px、300px、450px 等等

因此，如果内容宽度为 100px，则容器宽度将为 150px。如果内容增长到 170px，则容器大小跳至 300px。容器宽度永远不会是 200px。无论哪个更小且适合内容的宽度是 150px 或 300px。

这是否可以通过纯 HTML/CSS 实现，还是需要 Javascript？

- Vilx-

---

虽然JavaScript的解决方案似乎很直接，但我非常期待一些疯狂的纯CSS黑科技。 - Tomáš Zato

换句话说，看起来你想将媒体查询绑定到特定的容器，而不是整个视口。 - falsarella

https://dev59.com/S2ct5IYBdhLWcg3wNq-v - The Alpha

这绝对不可能仅通过CSS实现。 - animuson

还要检查ElementQuery。 - The Alpha

Answer 1

仅使用CSS不可能，但可以使用JavaScript来解决。 :D

- Andrew

---

这并没有提供问题的答案。如果您想对作者进行批评或请求澄清，请在他们的帖子下留言。 - Bryan P

是的，它回答了这个问题：“使用纯HTML/CSS是否可能实现，还是需要JavaScript？” - Andrew

这不是一个答案，你应该在原帖的问题下面进行评论。 - Bryan P

这是一个答案。如果他需要帮助创建JavaScript解决方案，可以发布一个新问题。 - Andrew

@Bryan 我不同意，它完整地回答了问题。我想他可以继续展示如何在JavaScript中实现，但这并不是被问到的。 - arserbin3

那你有什么证据证明这是不可能的呢？在这种回答中，你应该始终提供证据，如果没有，那么不是很主观吗？因此，这种类型的回答最好只作为评论，如果你查看评论，甚至会看到这个回答被管理员留言了。 - Bryan P

Answer 2

简短回答：仅使用CSS是无法实现的。

一点解释+解决方法：

媒体查询的设计并不是针对特定的元素，而是针对视口或设备的屏幕尺寸。因此，媒体查询根本不知道特定元素的大小。

要实现这种效果，您需要超越纯CSS并使用一些JavaScript。一个非常有用的工具是https://github.com/marcj/css-element-queries，它是一个基于元素添加媒体查询的polyfill。它也相当跨浏览器友好（在IE8+上工作）。

- display-name-is-missing

---

我暂时接受这个答案，因为共识似乎是“你不能仅使用CSS完成它”。虽然媒体查询不是CSS工具箱中唯一的工具。你确定没有别的吗？ - Vilx-

@Vilx- 我必须承认我不知道只用CSS的解决方案，所以我不知道在我的答案中写更多关于它的内容。 - display-name-is-missing