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

随着父母变得越来越狭窄（或者孩子变得越来越宽），我实际上看到的是：

AAA BBB
CCC

是否只有CSS解决方案？

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

Answer 1

因此，您可以在CSS中做一些事情来完成此操作。

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

如果这不是您想要的，那么使用media 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/

仅当三个DIV符合父级的宽度时，才能使其并排吗？

1 个答案: