问题标签 [column-count]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 我想根据记录及其内容在 html 中制作一个动态的 2 列表
我有一系列内容。我想做一个动态表。也可以使用 DIV。我想循环我的数组，我希望数据像这样显示。
它应该自动调整表格的数量和高度，因为我必须在 DOMPDF 中使用它。
CSS column-count 的属性不起作用，所以我想要一个解决方法，我会奖励 50 赏金给帮助我解决这个问题的人。
jquery - 可以将列数拆分为 div 中的 2 个复选框区域吗？
我有一个 div 中的复选框列表和一些 jquery，它拆分启用的复选框并将它们放在禁用的复选框上方的区域中（这与“勾选”复选框无关）。对于每个区域，我想在垂直流中显示 2 列，以便复选框按字母顺序自上而下显示。标签的布局应如下所示：
国家/地区列表需要灵活，因此简单地重新排列 HTML 中的标签是行不通的。我天真地尝试过使用列数和列宽，但这会弄乱启用和禁用的复选框区域。理想情况下，CSS 解决方案会很棒，但不确定是否可行。非常感谢任何帮助。小提琴：http: //jsfiddle.net/d7c56s00/
.
.
html - Chrome 中“列计数”属性的奇怪行为
我使用列数将文本拆分为列并分配显示：inline-block; 用于子元素以排除块内的文本换行。结果，渲染时出现了奇怪的行为，由于某种原因，在列块之后出现了一个大缩进。这是chrome的错误还是我做错了什么？有没有办法解决这个问题？
Chrome 63.0.3239.108，Linux Mint
PS：在 Firefox 中一切正常
jquery - jquery可排序插件中li元素的意外高度
我已经使用了这个插件，它工作得很好，但我面临的一个小错误是 li 元素得到了意想不到的高度。您可以通过以下步骤复制问题： 1. 在 Internet Explorer 中打开 可排序的演示并检查 ul 列表。2. 从开发人员工具 css 添加下面的 css 到 '#sortable'以将此列表分为 2 列
- 现在观察到第 4 个元素在每一侧被除以一半，尝试拖动列表中的第 4 个项目并观察 li 元素的高度
可排序插件的链接：jQuery-ui-Sortable Demo
希望快速解决这个问题。
html - 列数不会在 Chrome 中的短列上拆分
编辑：我已经删除了<br>几个人指出的可能导致问题的标签，并使用更正确的 CSS 重新创建了相同的布局，我在下面包含了它（width:100%在标签上使用而不是中断），但我仍然得到同样的错误。
我column-count:2用来将一些分组列表放入列中。
我不经常写这个，但在 IE 上它按预期工作，所有分组列表分成 2 列。
然而，在 Chrome 上，它并没有分成很短的一组，只有两个选项。为什么是这样？
IE版本，按预期工作
Chrome 没有将第一个短组分成 2 列
css - “column-count”中的“display: flex”在 Firefox 和 IE 中呈现单列
我需要在每个列内再次有一个两列布局和两列。我使用以下代码在 Chrome 和 Safari 上呈现不错，但在 Firefox 和 IE 中的单列中：
我究竟做错了什么？
编辑 - 对连字符感到抱歉。我也很困惑:(
我使用 column-count 的原因是我不知道我会得到多少个键值对。也许两个，也许六个，也许八个。但我仍然希望它们分为两列。这是所需布局的图像：
css - Chrome 升级使链接后续列链接不可点击
随着最近的 Chrome 升级版本 66.0.3359.139（官方构建）（64 位），我们主菜单的子菜单中的链接在第一个之后的任何列中都不可点击。 迪金森州立大学
删除这些列会创建一个巨大的链接列表，但它们似乎都有效。我尝试使用 display:flex 但似乎无法获得我们目前拥有的漂亮的左对齐列。
在 IE 和 FF 中仍然可以点击链接。
javascript - CSS column-count 有效，但希望控制它打破列的位置
我使用一个名为 Event List 的 WordPress 插件，它借助简码 - [event-list] 在任何页面上列出事件（带有文本和图片）。
该列表以一长列显示，我一直在努力尝试使其以列显示。问了插件的作者，他只是回答：“它可能可以用CSS”来完成。所以我尝试并找到了 column-count 属性，它非常棒，并且完全符合我的要求，一件事吧......
我知道它会自动平衡列，因此它会在不太理想的行上拆分列。它将日期留在页面底部的第 1 列，事件的图片从第 2 列的页面顶部开始。我目前使用这个简单的代码：
对于 html，我使用：
我认为 css 不是最佳选择，应该改用 JavaScript，但这不符合我的要求。
html - 为什么列数会在 4K 屏幕上的 Chrome 中呈现细线？
当 Chrome 处理高分辨率屏幕上的 column-count 属性时，我发现了一个奇怪的渲染问题。我在 4K 屏幕上看到了这个。
因此，当您将鼠标悬停在链接上时，有时会看到非常细的白/灰线出现在和周围<a>，具体取决于您悬停的内容。有时线条会持续存在，有时一旦您将光标移动到其他位置，它们就会消失。这些线条是像素细的，我的意思是它们小于网络 1px 单位，它们在 4K 显示器上是一个像素。这些很薄，很容易错过！我建议将鼠标悬停在最后一列中的链接上，因为这是我最常看到它们的地方。<li><ul>
更奇怪的是，浏览器窗口的大小似乎会影响它是否出现和强度。我有两个低分辨率显示器作为连接到我的主屏幕的额外显示器，它也会出现在它们身上，但是当尝试在一个非高分辨率显示器上重新创建问题时，我看不到线条出现。
我使用的是 Chrome 版本 68，但我也在旧版本中看到过它。
关于正在发生的事情有什么想法吗？