css - CSS3 列数阻止重叠覆盖

Question

我正在使用 css3 column-count 和 column-gap 选项实现多列布局。大量的 div 排列在主 div 内的 2 列中。问题是我想在重叠边界的内部 div 中使用下拉菜单。

问题：css3 列选项阻止下拉菜单与Google Chrome中的父 div 重叠。尝试更改 z-index 和溢出选项。有什么想法吗？谢谢！

编辑：似乎 chrome 通常在处理 css3 列时非常错误。例如，一旦我将引导字形图标放入按钮中，我就会看到更多问题。打开下拉菜单通常需要单击两次。Firefox 也在列之间更均匀地分配 div。没有发现有关这些问题的任何信息..？

score 1 · Accepted Answer

首先，z-index与其父元素相比，不会对嵌套元素执行任何操作。由于您尝试重叠列，因此 DOM 中没有元素可以实际重叠。列并非专门用于布局。相反，它们旨在在水平布局上创建可读的长文本。

您在 Chrome 中看到的内容直接来自W3C 多列布局规范以及它们应如何处理溢出。在此处设置溢出与列无关，仅与列的容器有关。

如果你想在这里完成你想要的布局，我强烈建议你研究一个网格系统，比如960 Grid或Bootstrap 的网格系统。

1 回答 1