问题标签 [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 - CSS列：针对每列中的最后一个孩子？
我有一个使用 CSS3 列数的报纸格式的标题网格。
HTML：
CSS（为简洁起见，省略了供应商前缀和非相关规则）：
你可以看到这是怎么回事：在 CSS 中是否有任何方法可以定位li每列中的最后一个元素，以便我可以删除底部边框？
我找到了这个问题，但没有答案。
html - 为什么我的多列布局在 Firefox 中将所有内容都放在一列中？
在 Firefox 31 中，此代码仅显示为一列而不是多列：
这是为什么？
css - 当我有偶数列时，如何强制奇数列计数？
我有一个将 CSS 列数设置为三的列类。如下所示：
我希望它以以下格式显示：
Apples Grapes Pears
Bananas
这可以在这个小提琴上看到：http: //jsfiddle.net/fM8ce/1/
如果我删除香蕉，则所有三列都按预期使用，并以下列方式输出：
Apples Grapes Pears
这可以在这个小提琴中看到：http: //jsfiddle.net/fM8ce/
我怎样才能让四个项目按预期分布在三列而不是 2 列？
css - 使用 CSS 多列定位第 n 列
使用 CSS 多列时是否可以定位第 n 列？
例如：我有一个两列布局，只想定位第二列：
HTML
CSS
如果没有，您是否有任何其他想法如何在两列内动态浮动文本（不是两个单独的 div，而不是 CSS 区域），并能够单独设置每列的样式？
html - 多列 CSS 不适用于打印
我为我发现了多列 CSS，但是发现在打印时这些样式被忽略了。
这是一个已知的错误？还是我做错了什么？
我在我的 Ubuntu Chrome 中检查它。
UserAgent：Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
css - CSS 列布局下方的额外空间
我有一个 2 列的纯 CSS 网格，它可以工作，但是它会导致两列下方有多余的空间。
.
如果我从每个单元格中删除 inline-block 多余的空间并不是那么糟糕，但是这是防止网格环绕所必需的。我认为问题出在垂直对齐上，但添加这似乎没有任何区别。有没有办法防止这种多余的空间？
结构：
css - CSS column-count 将我的表格分成两个不同的列
我正在尝试在我的页面上创建类似报纸的专栏。但是，我的页面包含表格，并且在 IE、Chrome、Safari 和 Opera 中，表格被分成两个不同的列；这不是我想要的行为。如果有一张桌子，我想把它完全放在一列中。这是一些代码：
查看问题和解决问题的一种简单方法是使用 Chrome 并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并将代码粘贴到我的示例中。如果您尝试使用 Firefox，您会看到该表完全位于左列中。
html - 在 CSS 列中发现了一个非常奇怪的缺陷
所以当我加入一个悬停图像时，我正在玩弄柱子并偶然发现了一个非常奇怪的缺陷。
在列的左侧，悬停效果完全正常。...但在列的右侧，悬停效果被禁用。
我仔细检查了它是否是我的代码或我的布局方式，但我找不到任何错误。
有没有其他人也遇到过这个问题？如果是这样，您是否找到任何解决方案来解决这种奇怪的情况？
我在这里设置了一个jsfiddle。
CSS：
HTML：
编辑 01
@Richard Parnaby-King 的移除解决方案-webkit-backface-visibility: hidden;似乎让事情发生了变化，但是，当光标在图像上快速来回悬停时，它停止工作。仍在寻找解决方案。
css - 使包含 CSS 列的 div 具有无限宽度
想象一个非常常见的 <header><article><footer> 布局，其中页眉和页脚的高度是固定的，并且文章会根据需要变得尽可能高（页面垂直滚动以适应）。这就像大多数网页一样。
我想要得到的是一个这样的布局，但是在它的一侧，所以文章可以根据需要变得尽可能宽，并且页面水平滚动：
我最初的尝试使用了 flexbox：
相关CSS：
但是当我尝试其他事情时，我正在远离它，比如在这个 fiddle中，它更接近一点。这种尝试的问题是文章宽度被限制为视口宽度的 100%，即使文本向右流动！columns（我的文章使用了对我的布局绝对重要的CSS 。）
我的要求是：
- 页眉、文章、页脚为 100% 高度（完成）
- 标题为 400px 宽（完成）和内容左侧（完成）
- 页脚宽度为 450 像素（完成）并位于文章的右侧（如何？）
- 文章尽可能宽而不重叠页脚（如何？）
所以，我需要帮助来实现大胆的目标。我能做些什么来防止文章与页脚重叠？是否有其他方法来布局此页面，以便文章宽度随着内容的扩展而扩展？
- 应该在 Chrome、Firefox 和 Safari 中工作（IE 和 Opera 是一个加号，但不是必需的）
- 最好不要使用 JavaScript（或可能从规范中删除的 CSS 功能）
- 简单、干净的 CSS 是理想的