时间戳

首页 > 解决方案 > 只有当它们适合父母的宽度时，我才能并排制作三个 DIV 吗？

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

问题描述

我想在它们的父 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

当父母变得更窄（或孩子变得更宽）时，我实际上看到的是：

AAA BBB
CCC

是否有任何仅 CSS 的解决方案？

编辑：有人问我要具体完成什么。基本上，我有一组跨越多个页面的搜索结果。页面导航设置为 First\page number\Last 类型设置，因此它可能看起来像：First 1 2 3 Last或First 12 13 14 15 16 Last取决于结果的数量。我想我总是可以将它堆叠在较小的设备上以防止尴尬的包装，但是当有空间时，我更喜欢从视觉角度来看它。

标签： css

解决方案

因此，您可以在 css 中做一些事情来实现这一点。

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

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

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

这将导致子 div 以小于 320px 宽的屏幕尺寸堆叠；

就像上面提到的 flexbox 一样，这个网站也有很多媒体查询。
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

推荐阅读