css - 只有当它们适合父级的宽度时，我才能并排制作三个 DIV 吗？

Question

我想在它们的父 DIV 中并排对齐三个 DIV，但是如果三个 DIV 的总宽度超过父 DIV 的宽度，我希望三个 DIV 中的每一个都显示一个在另一个之上.三个 DIV 中的每一个都具有可变宽度的内容，尝试固定这些 DIV 的宽度没有意义。我通常使用 display:inline-block 但当父级宽度可以容纳三个 DIV 中的两个时，这并没有帮助。

<div class="parent">
 <div class="a">aaa</div>
 <div class="b">bbb</div>
 <div class="c">ccc</div>
</div>

如果父 DIV 足够宽，我希望将它们视为:

AAA BBB CCC

如果它不够宽，我希望将它们视为:

AAA
BBB
CCC

当 parent 变得更窄(或 child 变得更宽)时，我实际看到的是:

AAA BBB
CCC

是否有任何纯 CSS 解决方案？

编辑:我被问到我正在尝试具体完成什么。基本上，我有一组跨越多个页面的搜索结果。页面导航设置为 First\page number\Last 类型设置，因此它可能看起来像:First 1 2 3 Last 或 First 12 13 14 15 16 Last取决于结果的数量。我想我总是可以将它堆叠在较小的设备上，以防止出现笨拙的包装，但从视觉 Angular 来看，如果有足够的空间，我更喜欢它内联。

Answer 1

因此，您可以在 css 中执行一些操作来完成此操作。

你可以使用 flexbox。但我不确定这是否正是您要找的
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这将允许您完成一些动态宽度的内容。

如果这不是您要查找的内容，那么使用媒体查询 将有助于提供解决方案。如评论中所述，无法使用 css 以编程方式执行此操作并使其动态并了解所有内容。但是，如果您有指定的最小页面宽度，并且您知道每个对象的宽度，那么媒体查询是您的最佳选择，因为您可以计算所需的宽度并确定何时应该发生中断。

div.parent > div {
    display: inline-block;
}
@media only screen 
  and (min-device-width: 320px) {
    div.parent > div {
        display: block;
    }
}

这会导致子 div 在屏幕尺寸小于 320 像素宽时堆叠；

这个网站，正如上面提到的 flexbox，也有很多关于媒体查询的内容。
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/