我已经在我的网站上放置了这 4 个专栏一段时间了。它们都设置在相同高度的盒子中，并且都排成一行。我现在正在考虑使网站具有响应性，并注意到这些列只是在较小的设备上重叠。

我希望这些列灵活，例如，如果它是电话设备，它会切换到 2 行 2 列或 4 行 1 列。

我尝试使用媒体查询并将.keypoints .column {显示设置为block而不是inline-block. 然而，这仍然使列保持在一行中。

这仅仅是我需要完全删除列并将它们变成内联/块元素跨度的情况，具体取决于屏幕大小，还是仍然可以使用我当前的列方法来完成？

http://jsfiddle.net/ycwtb01m/

HTML

CSS

这是我正在处理的网站页面结构的演示：http: //jsfiddle.net/kz5ch49w/2/

如您所见，有 5 个块：正文（灰色）、页眉（红色）、页脚（绿色）、左侧块（黄色）和右侧块（黑色）。

你觉得我的结构好吗？（您可以在 JSFiddle 演示中看到 CSS）

我的问题是我不明白为什么带有文本的列这么薄，为什么只有第一列是黑色的。我也尝试在右侧块中放置“填充：20px”，但没有成功（列的高度超过 100%）。我应该在右块 div 中创建一个新的 div 吗？

请你帮助我好吗？

这是最后一个 JSFiddle 演示更新：http: //jsfiddle.net/kz5ch49w/3/

我有一个带有 CSS3 列的页面，我试图将一个伪元素放置在与内联元素相同的 Y 位置，但在固定的 X 位置（在左边距）。这在第一列上效果很好，但其他列中的其余这些伪元素的行为不正常。

最终发生的事情是伪元素被放置在左边距，如果它在单个列中，元素将在哪里。如果向下滚动，您将看到左侧的绿色块，如果文本位于单列中，则文本所在的位置。

我想要的是绿色块位于存在的文本行左边缘的列间隙区域中。

我猜问题出在这段代码上：

JSFiddle：http: //jsfiddle.net/o0xu0e2x/1/

注意：我的应用程序只需要 Chromium 41+ 支持，这就是我使用 -webkit 标签的原因。使用伪元素 :before/:after 无关紧要，它们的行为都是这样的。

我第一次接触columnCSS 上的规则，试图创建一个类似 Pinterest 的布局，发现它有点奇怪。我一定是做错了什么，但结果并不像预期的那样。

第一件事是：根据子元素的数量，最后一列几乎完全中断（是的......也许第一行或第二行都可以）并且每个元素都位于前一列的底部。

然后在最后一行下方创建了一个奇怪而巨大的边距。不知何故，它就像最后有另一个隐藏的行（尽管没有）。

最后，似乎列首先被填充或类似的东西。第 3 个元素位于第 3 行，第 8 个元素位于顶部。

根据列表中元素的数量，列的宽度可以填充（列填充 100% 的宽度）。

哦，如果我删除column-gap规则，页面底部的空间会增加！

有没有一种好方法可以让它始终填充宽度 100%（定义为 N 行column-count），并且单元格首先从左到右插入，然后才从上到下？CSS

HTML

错误示例（有很多，这个出现columns-count: 4在列表中，有 6 项）

我正在使用 CSS3 多列。内部元素有 position:relative 并且可以包含 position:absolute 的箭头。

问题： CSS3 列用 position:absolute 截断了箭头的一部分。

示例：http: //jsfiddle.net/k4ucr72h/

在包装器中使用column-count时，包装器中的容器已border-radius应用，并且容器中的内容溢出，内容在所有列中完全消失，除了第一个列。

这是我的例子：https ://jsfiddle.net/f4nd7tta/
红色的半圆只在第一列可见，为什么？

所以我有这样的CSS：

这完美地创建了 3 列，但是当我获得另一行时，订单似乎垂直出现，如下所示：

而不是我想要的：

重要的！

我需要的另一个重要属性是，每个帖子之间必须垂直设置边距。因此，例如，如果您查看上面的表格 if 2is long than 1，则顶部4将从y1 开始，而不是：height of 2+ y。

HTML是这样的：

我能做些什么来解决这个问题？

我对任何解决方案都很满意，即使是包含 javascript/jquery 的解决方案

这就是我所追求的

我正在使用 column-count 和 -webkit-column-count 创建一个布局，但我发现了一个多次出现的问题。

从这张图片可以看出，Chrome 45（FF 中没有）打破了元素的边界，这很奇怪也很烦人。这是发生中断的代码（但我不知道为什么这里没有发生，唯一的区别是字体，并且没有 Mayers css reset）：

但它没有用。能给点启示吗？

我对多列布局有疑问。我将菜单设计为一组 div 元素，我想将它们对齐为 1-4 列（取决于屏幕高度和菜单项数）。它不能被硬编码。

这是我的 HTML（jsfiddle 链接）：

我的 CSS 看起来像这样：

如果您在浏览器中检查#sideMenu，您会发现尽管它显示为 3 列并且应该具有它们的宽度，但它只有第一列宽度。

我怎样才能解决这个问题？（红色文字应在右侧最后一个框旁边）

删除浮动不是一个好的解决方案，因为我需要在页面内容旁边使用它。

我需要菜单 div 和页面内容一样浮动，因为我希望我的菜单在用户点击时来回滑动。我想将用户操作的菜单宽度从 0% 修改为 100%，但这是不可能的，因为内容会干扰菜单。我已经用最新版本的 Chrome 和 Firefox 进行了测试。

我正在尝试column-count在包含多个段落的标签上使用 css3 属性。在 Webkit 浏览器上，我看到了一个错误。在某些屏幕尺寸下，段落边距无法很好地跨列拆分。

这是一个屏幕截图（请注意，以单词“Duis”开头的第三段被删除，而它应该与屏幕顶部齐平）：

这是问题的 CodePen。我已将宽度固定为 1000 像素，因此问题对于 Chrome* / Safari 用户来说很明显。

*编辑：刚刚在 2018 年初回来查看，Chrome 不再受此错误的影响。Safari（测试 11.0.3）可以！

我试图使用page-break-*规则来强制段落以避免中断。我也尝试-webkit-perspective:1按照http://caniuse.com/#feat=multicolumn上的评论使用，但这没有效果。

有什么想法吗？