问题标签 [css-multicolumn-layout]
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.
css - 有没有办法为 CSS3 中的列指定不同的宽度？
我想使用 CSS 来呈现两列布局。我使用的标记是这个
有没有办法让一列的宽度为 20 像素，而一列的宽度为 80 像素？
css - 3 列报纸布局中的许多 div
目前我有许多未定义长度/高度的 div。它们包含一些超链接作为列表。通过提供这些 div 可以实现几乎想要的效果float:left; width:150px; margin: 10px;
但是，在第一个 div 仅包含 1 个链接的情况下，第二个 div 包含 10 我得到以下结果（数字代表 div）：
想要的结果当然如下
html - 带有 CSS 的多列布局顶部的图像
我有一个两列布局（使用 CSS 多列布局模块），我想在第二列的顶部有一个图像。似乎我必须自己放置图像，以便它位于文本中中断的位置。
问题是我希望列也能均匀填充。
有没有办法在没有 JavaScript 的情况下解决这个问题？这使用 div 而不是图像，但想法是将红色块放在其列的顶部。
css - 列表项的 CSS 多列布局在 Chrome 中未正确对齐
我正在构建一个以多列格式呈现给用户的菜单系统。CSS3 中的column-count属性让我完成了 90% 的工作，但在 Chrome 下对齐时我遇到了困难。
菜单比较简单：
- 由column-count 属性划分为多列的无序列表
- 列应按顺序填充，因此column-fill: auto
- 菜单项表示为列表项
- 每个列表项都有一个可点击的锚标签，通过display: block完全扩展
我遇到的对齐问题最明显的是每个列表项的顶部边框和一些背景颜色。在 Firefox 中，列表项总是在每一列中整齐地对齐，不会渗入上一列/下一列。在 Chrome 中，对齐是一个废话，随列表项的数量和任何填充/边距属性而变化。
我在这里发布了一个简单测试用例的代码：http: //pastebin.com/Ede3JwdG
问题应该立即显而易见：在 Chrome 中，第二列中的第一个列表项会渗入第一列。当您删除列表项（单击它们）时，您可以看到对齐方式进一步分解。
我尝试调整列表项的填充/边距，但无济于事：Chrome 似乎有一个有缺陷的算法，用于在多列布局中流动内容。
我没有完全放弃列数（支持手动生成/列生成器等）的主要原因是菜单系统还涉及跨多个子菜单的拖放功能，并布置了菜单数据作为一个有凝聚力的基于列表的层次结构使得代码干净。
有没有办法解决 Chrome 中的对齐问题，还是我现在应该放弃列数？
添加：
- jsFiddle 原型：http: //jsfiddle.net/VXsAU/
- JS Bin 原型：http: //jsbin.com/ebode5/
css - CSS3 多列布局 IE 解决方法
我今天偶然发现了一个非常棒的项目（CSS3 PIE），它可以使用 CSS3 圆角、阴影和渐变，即使在 IE6、IE7 和 IE8 中使用 CSS 设置和通常的 CSS3 表示法。
它使用 *.htc 文件来完成诡计并使其对开发人员真正透明（如设置它并忘记它 - 创建新页面或更改现有页面时无需额外的脚本调用（前提是您不更改 CSS））。
我想知道是否有类似的多列布局可以使用。浮动不是一种选择，因为内容不是从上到下 - 从左到右，而是从左到右 - 从上到下......
有人为 CSS3 多列布局开发类似的东西吗？
javascript - JavaScript 用于多列布局中的中断
我在固定高度元素中使用多列 CSS 布局，因此浏览器会根据需要创建尽可能多的列来包含内容。新列将始终出现在其他列的右侧，但我想在三列之后中断，并使列 4、5、6 出现在 1、2、3 下方。我想这可以用 JS 来完成，但我不知道该选择什么。
css - 防止多列布局中的元素碎片
鉴于此代码：
我想使用CSS 多列布局将这 3 个框排列成 2 列。
正如您从我的演示中看到的那样，它有效。但是，我担心第二个框会被分成两列。如果可能，我想防止这种元素碎片。有没有办法告诉浏览器不要将我的盒子分成多列？
（请注意，第二个和第三个框都可以轻松放入第二列，这是我想要实现的排列。）
html - CSS3 多列将图像分成几个部分
我正在 iOS 平台上实现一个 epub 阅读器。我已经使用 CSS 多列布局对 HTML 文件进行了分页。它适用于纯文本 HTML 文件，但是在加载图像时，图像将被分成几个页面。
这是我的多列样式：
我试图实现以下样式：
但它不起作用。如何避免图像分离？
html - 如何防止元素内的列中断？
考虑以下 HTML：
和以下CSS：
就目前而言，Firefox 目前将其呈现为类似于以下内容：
请注意，第四项拆分为第二列和第三列。我该如何防止呢？
所需的渲染可能看起来更像：
或者
编辑：仅指定宽度以演示不需要的渲染。在实际情况下，当然没有固定的宽度。
css - 我的蓝图 CSS 不适用于奇数列
我在 Rails 应用程序上使用 Blueprint CSS。我正在制作一个 4 列布局，每个项目周围都有一个框。如果我有 4 件或 8 件，那么一切都很好，我有 2 行产品。如果我有第 9 个产品或任何不能被 4 整除的产品，那么行和项目就会脱节并溢出到下一列。有谁知道问题是什么？