问题标签 [css-multicolumn-layout]

我们正在尝试使一组列表适合具有设定宽度和高度的水平滚动容器。我们正在使用 CSS 列来尝试解决这个问题。但是，属性 'column-fill: auto' 以正确的方式显示列表项，但 'ul' 没有调整大小以适应其显示方式的变化。有什么办法可以解决这个问题，还是有另一个 CSS 解决方案？

这是问题的一个例子：

更新：适用于所有浏览器的最新代码位于此 JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/

我正在尝试使用纯 CSS 方法制作响应式列。

我有一个问题，列有时在顶部有间隙/边距。

尝试探索的 JSFiddle 链接 - https://jsfiddle.net/webvitaly/yu00ugft/

如何解决？

CSS：

HTML：

我有一个div. column-count: 2我也有img它的内部。

我希望始终在第二列的右上角看到此图像。

我怎样才能做到这一点？我知道我可以使用position: absolute，img但是文本不可见（它在图像下方）。

我也想到padding-top了第二列，但据我所知这是不可能的。

我的代码：

预期行为：

我有一个使用 HTML 和 CSS 的 2 列布局。在这些列中，我有一个选择菜单，当单击这些列表项之一时将显示该菜单。我需要相对于单击的项目定位此选择菜单，并且不影响其周围元素的布局，就像传统的选择选项菜单一样。但是，我不能使用传统的选择，因为这是一个自动提示输入/菜单。因此，我在其相对定位的父项中为菜单容器使用了绝对定位的项。

我想要的是：

我的问题是绝对定位的项目正在破坏，就好像它是列的一部分一样。这违背了我所了解的一切position: absolute，但它似乎在规范之内。更郁闷的是，浏览器按我的意愿显示绝对定位项（只要我不设置position: relative在父项上），但我需要设置position: relative在父项上，或者选择菜单（作为绝对定位项）不会总是显示相邻的相应元素。

我得到什么：

我还尝试了使用 flexbox 的类似列的布局，但是这样，项目从左到右显示，当我需要它们按顺序从上到下显示时，就像在传统的列式布局中一样。我可以将 flexbox 与 一起使用flex-flow: column wrap，但这需要我知道/设置容器元素的高度，这是我做不到的。CSS 列很好地包裹了列表，而无需设置高度。

我认为最简单的解决方案是以某种方式伪造绝对定位或让 flexbox 按顺序（从上到下）显示项目，而无需在容器上明确设置高度。这两种我都试过了，都没有令人满意的结果。我对使用 JavaScript 解决方案持开放态度，但我正在尽力避免它并仅使用 CSS 解决这个问题。

这是一个带有示例的代码笔，显示了我的问题。从 HTML 中删除父类以查看预期的绝对定位项（请注意，这有时会导致定位不正确）。

想inline-block用横列制作。我需要每个inline-block宽度作为最小的列数来适应内容。

问题是浏览器处理奇怪的列。

Chrome可能会确定没有列的宽度，而不是将列放入该区域。第一个块有一列有额外的空间。其他块的宽度可能为一列，但它们都有不同的宽度：

Firefox将所有块的宽度设置为单列，xt 会溢出它。我可以在元素或其任何容器上强制滚动条，但我不能使它们中的任何一个具有正确的宽度。

我有一个 hack 让 Chrome 表现得像 Firefox，但它并不能帮助我解决问题：

其实我需要得到这样的东西：

PS：俄语中的同​​样问题。

我有水平滚动列。里面有一些带有标题的文本。我需要让每个标题生成一个新列并占用属于它的列上方的所有空间：

或者：

但我能做的最好的事情是（顺便说一下，它在 Firefox 中失败了）：

我尝试使用inline-blocks存档所需的结果，但那里出现了另一个问题。我还尝试了一些负边距、绝对定位和 的方法transform，但没有成功：它们不允许超出列（除了absolute容器上下文：它忘记了基于列的水平定位）。

最简单的代码https://jsfiddle.net/07n6L2yh/10/

更复杂的版本：https ://jsfiddle.net/07n6L2yh/11/

PS：俄语中的同​​样问题。

我环顾四周，但找不到任何描述我的问题的东西。我在一个主标签中有 5 个部分元素，其中 3 个包含文本和图像。

我正在尝试使用列数并排获取列中的每个部分，但是最后两列没有文本和图像堆叠而不是彼此相邻。我在下面附上了一张图片。

当我添加相同的图像和文本时，它可以正常工作，但我想知道我是否可以有空列，因为我还没有它们的内容。

编码：

关于仅出现在 Chrome 中的 CSS 列布局，我遇到了一个非常奇怪的行为。

根据被列化的项目的整体高度，它的左偏移量会发生偏移，这使得很难确定项目的实际位置。渲染看起来不错，但是如果您检查元素，您实际上可以看到它偏移了很多。

这是一个例子：https ://jsfiddle.net/vx8h8u46/

检查 .panel 元素，您会发现它的边界矩形不是从左侧开始的。

如果您单击按钮删除一项，那么边界矩形突然是正确的。

似乎当面板的高度超过某个阈值时会发生这种情况，但这只是目前的猜测。有解决办法吗？

如您所见，css 仅适用于第一列以显示 item-meta。怎么了？所有的文本/元都在正确的位置，如果你检查它，它就在那里。只是出于某种原因，它不想将不透明度改回 1。这很奇怪，因为它显然在第一列中工作，而且都是相同的代码。此外，该项目显然可以正常工作，因为正在显示深色叠加层。

当您调整窗口大小以使其显示为 2 列时，第一列中会出现更多帖子并且它们工作正常。

这是链接。

[编辑]：如果您悬停足够长的时间，则会出现第二列中的内容。

CSS：

我在使用 CSS 中的列时遇到了一些问题。我想设置column-count: 6;，但结果只有 5 列。对于 <=5 的值，它似乎工作正常，但是当我尝试设置更高的值时，它会产生奇怪的结果。列数不匹配。

这是小提琴：https ://jsfiddle.net/btqxd20r/1/ 。我正在 Chrome 中测试它。