javascript - 根据容器大小水平堆叠div

Question

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

想到了table或者ul，但是没有得到想要的结果。

如果 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 媒体查询检查浏览器大小，这样您就可以知道现在元素的大小是多少并更改它们的属性!如果您不想使用 jQuery 而想使用 CSS，CSS3 媒体查询可能是一个替代方案。但它的效率并不高，因为您将获得设备及其屏幕的宽度，而不是元素。

引用:

http://css-tricks.com/css-media-queries/