Question

如果div不适合他们的容器，是否有一个CSS（3）技巧来水平堆叠div？如果容器小于div的宽度之和，它们应该相互重叠，第一个对齐到左边，最后一个对齐，直到只有一个div可见，如果容器太小。

我想到了一张桌子或一张桌子，但我没有得到理想的结果。

如果使用CSS无法做到这一点，我将使用jQuery寻找JS解决方案。这将更容易，但不如CSS好。

Answer 1

要使它们适合内联，请使用：display: inline。

如果它们不适合，您可以使用max-width作为子元素。或者你可以为孩子使用width: 90%，所以它总是填充和收缩到父元素的90％。

否则在CSS3中，您可以使用媒体查询来检测当前的浏览器大小，然后更改属性。

你无法检查CSS中元素的宽度或高度，因为你需要JS或jQuery。

在jQuery中使用它：

$('selector').css('width');

并使用它！然后使用z-index将它们全部重叠，以便它们相互重叠，如果它们的宽度较小:)或者尝试设置某种max-width，以便它们与当前大小相对应。

但您可以使用CSS3 Media Queries检查浏览器大小，以便您现在知道元素的大小并更改其属性！如果您不想使用jQuery而不是CSS，CSS3 Media Query可能是另一种选择。但它的效率并不高，因为你会得到设备的宽度和屏幕而不是元素。