是否有 CSS(3) 技巧可以水平堆叠不适合其容器的 div?如果容器小于 div 的宽度之和,它们应该相互重叠,第一个左对齐,最后一个右对齐,如果容器太小,直到只有一个 div 可见。
想到了table或者ul,但是没有得到想要的结果。
如果 CSS 无法实现,我将使用 jQuery 寻求 JS 解决方案。这会更容易,但不如 CSS 好。
最佳答案
为了使它们内联,使用的是:display: inline
。
如果它们放不下,您可以对子元素使用 max-width
。或者您可以为子元素使用 width: 90%
,这样它总是会填充并缩小到父元素的 90%。
否则在 CSS3 中,您可以使用媒体查询来检测当前浏览器的大小,然后更改属性。
您无法在 CSS 中检查元素的宽度或高度,为此您需要 JS 或 jQuery。
在 jQuery 中只需使用这个:
$('selector').css('width');
并使用它!然后使用 z-index
将它们全部重叠,这样如果它们的宽度较小,它们就会相互重叠 :) 或者尝试设置某种 max-width
这样它们与当前大小对齐。
但是您可以使用 CSS3 媒体查询检查浏览器大小,这样您就可以知道现在元素的大小是多少并更改它们的属性!如果您不想使用 jQuery 而想使用 CSS,CSS3 媒体查询可能是一个替代方案。但它的效率并不高,因为您将获得设备及其屏幕的宽度,而不是元素。
引用:
关于javascript - 根据容器大小水平堆叠div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19476463/