问题标签 [css-multicolumn-layout]

我正在尝试使用columnCSS 属性设置一个 2 列列表（在桌面屏幕上）：

在 Firefox 中一切都很好：我可以在子列表中看到圆点，并且列在顶部正确对齐。

在Chrome中，一场灾难：子列表没有圆点，列不对齐（似乎第二列是中间对齐而不是顶部对齐）

我写了一个Fiddle来显示这个问题。

如何使用CSS从一个列表中创建多个列？ 列数必须根据媒体查询的屏幕宽度而变化，如下所示：

大屏幕：

中屏：

小屏幕：

这是我的HTML代码：

我一直致力于制作一个充满事件的页面的打印友好版本。我们决定让页面使用多列 CSS 来节省纸张。令我惊讶的是，Chrome 有一个覆盖，因此我在打印时不能使用多列。这是有原因的，还是一个错误？

我正在尝试在我的fixed/absolute定位下拉导航中使用 CSS 列。我想指定columns-width和下拉列表max-height，让浏览器根据需要自动填充尽可能多的列。但由于某种原因，该UL元素无法正确调整其列的总宽度。

我在演示中添加了两个小按钮，它应该模拟我预期的行为。

希望我在标题中写了这个问题，我会继续，因为我不太擅长用词，我会尽量保持简单。

所以我想要完成的是具有唯一 ID 设置为在列中显示的项目列表。如果特定 id 有它自己的样式（浮动并制作一个带有背景的块），我需要在列流/渲染时将其取出（这是正确的术语吗？）。这是否可能以及如何（试图避免 JS/jQuery）？这段代码：

下一段代码显示我想要实现的目标。

我有一个 html 列表，对于我的容器来说太长了，我想打破它并在另一列中显示额外的项目。但是当我在 css 中使用列时，它会平均划分列表。就像如果我有 12 个项目，那么每列中有 6-6 个。但我不想这样做。相反，我希望它只显示另一列中的额外项目。

在下图中，我想在另一列中显示从 9 到 12 的项目。

请帮忙。

CSS

HTML

请参考此图片

正如您在图像中看到的那样，9 到 12 个列表项是开箱即用的。我不能把它带进盒子里。

https://jsfiddle.net/6g6176zs/1/是一个简单的 2 列 CSS 布局，其中图像非常宽，跨越了几列，但不幸的是，文本覆盖了图像。

我知道您只能放置column-span:all包含图像的 p，但是有没有办法在不知道哪个<p>包含宽图像（或表格或您有什么）的情况下确保文本在图像周围流动（如浮动）？

理想情况下，文本会流动，使其尽可能填充列，直到列宽：

CSS：

html:

我正在尝试找出一种跨浏览器方法来实现无序列表的列式布局。标记来自 CMS，因此我无法在添加类之外修改输出。我可以让列工作，但我还需要指定分栏符，因为列并不总是相等的。标记看起来像：

CSS（在 Chrome 甚至 IE/Edge 中运行良好，但在 Firefox 中失败）：

这里期望的结果是 3 列布局（我确实得到了），其中 Item1、Item3 和 Item11 是 3 列中的顶部元素。

在 Chrome 中，它看起来膨胀：

在 Firefox 中，我在 Item1、Item3 和 Item11 上得到粗体文本

JS小提琴

我遇到了小段落的问题。正如您在图片中看到的那样，我希望文本在左栏中继续向下流动，但段落会跳到右侧。我相信这与如何“填充”列有关，但就我所见，Chrome 不支持 column-fill 属性。我有什么选择？

相关CSS：

相关HTML：

我需要控制一些在 html 节点中单击的 div 的转换。当这些 div 带有显示“inline-block”时，它可以正常工作，但是如果我用 css3 将它们包装在列布局中，它们就不起作用（第一列除外！）

检查这个小提琴：https ://jsfiddle.net/madelavega/hjyntsob/

第一部分，用栏目布局，只有第一栏工作：点击flip再点击“i work”，注意CSS hover样式；在第二列和第三列中它不起作用。

在第二部分中，使用 display inline-block 可以正常工作。

我需要列布局，但它似乎是一个 Chrome 错误，因为它在 Firefox 上运行良好。有人知道这件事吗？