CSS3 列屏蔽特定列答案

【问题标题】：CSS3 Columns Block out specific column(s)CSS3 列屏蔽特定列
【发布时间】：2013-02-12 09:07:37
【问题描述】：

我有一个使用 CSS3 分为三列的 div

.div {column-count: 3;}

这个 div 包含一个填充部分列的文本字符串。

谁能想出一种方法来屏蔽这些列中的一个或多个？

例如，第一列被阻止，文本从第二列的顶部开始。

div 的高度未知且变化。

div 也是 contenteditable。

【问题讨论】：

这听起来像是您在误用/误解 CSS 列。您能否提供更多信息，说明您为什么要这样做，或者您到底想达到什么目标？
这样用户可以将文本输入到这个“作者”工具中，并且某些布局指定应该阻止某些列。布局必须灵活，以便可以随时更改被阻止的列。
网络不是桌面出版，所以像这样的特定功能实际上是不可能的。为什么您首先要允许用户阻止列？您不能使用 CSS 列，而是将文本服务器端拆分为“相等”的部分并自己渲染列，但这样拆分文本并非易事。

【解决方案1】：

您可以使用蓝图 CSS。它是一个框架，可用于轻松创建复杂的多列布局。

此外，列计数仅适用于歌剧。 Firefox 支持 -moz-column-count，而 Chrome 和 Safari 支持 -webkit-column-count。

神速。

【讨论】：

【解决方案2】：

我最终这样做的方式是，如果我想阻止左列，我将应用 padding-left 等于一列的宽度，删除等于一列宽度的 width 并将 column-count 更改为 2。

如果我想阻止中间列，我会将column-count 更改为 2，并将column-gap 设置为等于一列的宽度加上现有的列间隙。

【讨论】：