问题标签 [css-multicolumn-layout]

我有一个动态填充的列格式的无序列表，通常每个只有一两个单词<li>，但偶尔会出现更长的列表项。为了保留我的列，我选择用省略号隐藏这些较长项目的多余文本：

但我仍然想让用户访问这些项目，所以我创建了一个悬停样式，如下所示：

这会将文本显示在列之间的空间中，但在到达相邻的<li>. 我想优先考虑<li>悬停的那个，所以它显示在其他上面并且具有不透明的背景。玩弄z-index并没有奏效。

这是一个小提琴：https ://jsfiddle.net/9p7qeon2/

我正在尝试使用 CSS 的 3 列布局，并希望使用垂直规则分隔列。iframe 中的这个示例是我正在寻找的，并且看起来很完美： http ://www.webdesignerdepot.com/2013/03/how-to-use-css3-columns/

问题是当从 iframe 中删除源 html 时，在调整窗口大小时规则变得错位：http: //netdna.webdesignerdepot.com/uploads7/how-to-use-css3-columns/demo.html

这发生在 Chrome 中。我错过了什么吗？或者有解决方法吗？

如何以不同的方式显示列表的最后一项？

http://www.oraivenetiassociati.ennestudio.net/le-marche/

问题是前 3 个元素还可以，但最后一个元素从正文中消失，并且在小屏幕中不会显示该项目。因此，列表“Argenti”必须显示在单个列中。

所以，我必须让“Argenti”忽略 CSS 的一部分。

目前，这部分代码创建了三个子列：

我留下所有代码的链接https://jsfiddle.net/1trtbdag/

我试图在另一个可能包含多列的 div 周围放置一个“div”。

但是，正如您在这里看到的

蓝色 div 仅与第一列一样宽。我想包含所有三个。

我在这里想念什么？

我希望中间列中的 4 个类位于第一列中的类之下，然后将“信息技术轨道由...组成”移动到列的顶部。我该怎么做？

这是我的代码当前产生的内容：

这是我针对此特定页面的 HTML：

这是我的CSS：

我的问题是 CSS 列属性。我记得有一种方法可以防止空白 ( <br>) 行最终成为右列的第一行，但我似乎无法弄清楚。

创建列效果的 CSS：

的HTML：

xxxxxxx <br>
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx

这看起来有点乱！

我想要实现的是：

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx

我已经接受了 Ian M 的回答，因为它确实让我走上了正轨，但是，还有一个小问题：

当第一个孩子 p 在左列的底部结束时，一切都很好。但是当它延伸到右列时，它会（正确地）在列的顶部继续，但是（这是小故障）由于它的 margin-bottom:0 （以防止在第一行出现空白的情况下） p 结束于左 col 的底部），它现在没有到下面的第二个 p 的边距。

从视觉上讲：

第一人：aaa 第二人：bbb

aaaaa bbbbb
aaaaa bbbbb
aaaaa ...
√</p>

但

aaaaa aaaaa
aaaaa bbbbb
aaaaa bbbbb
a 和 b 之间没有边距！

一个难题。

JSFiddle 演示

我有一个只有一点内容的图片，上面有标签article中带有标题的图片。figure有article2 列用 CSS3 列声明。然而，figcaption正在从内部拉出figure以试图使列均匀。

CSS

HTML

研究将我引向break-inside，并指定break-inside规则解决了figcaption从 中提取的问题figure，但是box-shadow留在另一列中，这更糟。

我已经在 Chrome 和 Safari 中确认了这个问题，而 Firefox 完全忽略了break-inside规则并给出了第一个屏幕截图的结果，即使figcaption它也包含在break-avoid规则中。

可以有任意数量的article段落，并且当有足够的文本以匹配图像的高度时，它会正确显示

我怎样才能让整个figcaption元素留在一列，跨浏览器，包括box-shadow？还是 CSS3 列太新而无法修复？

我正在尝试使用相对固定的 div 中的 CSS 列以类似列的方式排列图像。我希望 div 垂直滚动，但是当它达到可用的最大垂直空间时，它会在右侧创建新列，迫使 div 水平滚动，而不是保持 3 个预期的列并垂直溢出。关于如何解决它的任何想法？

我有一个无序列表，我想将其拆分为列，所以我column-count在父 div 上使用 CSS：

但是，由于某种原因，这会在第一列的第一行留下一个空白行：

如何让我的列整齐？

有一个JSFiddle