问题标签 [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.

0 投票
3 回答
8235 浏览

css - CSS列:针对每列中的最后一个孩子?

我有一个使用 CSS3 列数的报纸格式的标题网格。

http://jsfiddle.net/L6TTJ/

HTML:

CSS(为简洁起见,省略了供应商前缀和非相关规则)

你可以看到这是怎么回事:在 CSS 中是否有任何方法可以定位li每列中的最后一个元素,以便我可以删除底部边框?

我找到了这个问题,但没有答案。

0 投票
4 回答
68 浏览

html - 为什么我的多列布局在 Firefox 中将所有内容都放在一列中?

在 Firefox 31 中,此代码仅显示为一列而不是多列:

这是为什么?

0 投票
1 回答
1855 浏览

css - 当我有偶数列时,如何强制奇数列计数?

我有一个将 CSS 列数设置为三的列类。如下所示:

我希望它以以下格式显示:

Apples Grapes Pears Bananas

这可以在这个小提琴上看到:http: //jsfiddle.net/fM8ce/1/

如果我删除香蕉,则所有三列都按预期使用,并以下列方式输出:

Apples Grapes Pears

这可以在这个小提琴中看到:http: //jsfiddle.net/fM8ce/

我怎样才能让四个项目按预期分布在三列而不是 2 列?

0 投票
2 回答
964 浏览

css - 使用 CSS 多列定位第 n 列

使用 CSS 多列时是否可以定位第 n 列?

例如:我有一个两列布局,只想定位第二列:

HTML

CSS

http://jsfiddle.net/XH72Y/3/

如果没有,您是否有任何其他想法如何在两列内动态浮动文本(不是两个单独的 div,而不是 CSS 区域),并能够单独设置每列的样式?

0 投票
3 回答
5422 浏览

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

0 投票
1 回答
906 浏览

css - CSS 列布局下方的额外空间

我有一个 2 列的纯 CSS 网格,它可以工作,但是它会导致两列下方有多余的空间。

截屏.

如果我从每个单元格中删除 inline-block 多余的空间并不是那么糟糕,但是这是防止网格环绕所必需的。我认为问题出在垂直对齐上,但添加这似乎没有任何区别。有没有办法防止这种多余的空间?

结构:

0 投票
2 回答
4793 浏览

css - CSS column-count 将我的表格分成两个不同的列

我正在尝试在我的页面上创建类似报纸的专栏。但是,我的页面包含表格,并且在 IE、Chrome、Safari 和 Opera 中,表格被分成两个不同的列;这不是我想要的行为。如果有一张桌子,我想把它完全放在一列中。这是一些代码:

查看问题和解决问题的一种简单方法是使用 Chrome 并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并将代码粘贴到我的示例中。如果您尝试使用 Firefox,您会看到该表完全位于左列中。

0 投票
2 回答
1477 浏览

css - CSS:强制li在列数内不切到新列

我试图强制 li.key 不换行到新列。我想要一个新的 li.key 从每列的顶部开始。这是一个 JS Fiddle。

这可能不使用JS吗?

CSS:

期望的结果:(查看每列顶部的字母。)

0 投票
2 回答
1157 浏览

html - 在 CSS 列中发现了一个非常奇怪的缺陷

所以当我加入一个悬停图像时,我正在玩弄柱子并偶然发现了一个非常奇怪的缺陷。

在列的左侧,悬停效果完全正常。...但在列的右侧,悬停效果被禁用。

我仔细检查了它是否是我的代码或我的布局方式,但我找不到任何错误。

有没有其他人也遇到过这个问题?如果是这样,您是否找到任何解决方案来解决这种奇怪的情况?

我在这里设置了一个jsfiddle

CSS:

HTML:

编辑 01 @Richard Parnaby-King 的移除解决方案-webkit-backface-visibility: hidden;似乎让事情发生了变化,但是,当光标在图像上快速来回悬停时,它停止工作。仍在寻找解决方案。

0 投票
12 回答
2654 浏览

css - 使包含 CSS 列的 div 具有无限宽度

想象一个非常常见的 <header><article><footer> 布局,其中页眉和页脚的高度是固定的,并且文章会根据需要变得尽可能高(页面垂直滚动以适应)。这就像大多数网页一样。

我想要得到的是一个这样的布局,但是在它的一侧,所以文章可以根据需要变得尽可能,并且页面水平滚动:

水平滚动

我最初的尝试使用了 flexbox:

这是我对 jsFiddle 的第一次尝试。

相关CSS:

但是当我尝试其他事情时,我正在远离它,比如在这个 fiddle中,它更接近一点。这种尝试的问题是文章宽度被限制为视口宽度的 100%,即使文本向右流动!columns(我的文章使用了对我的布局绝对重要的CSS 。)

我的要求是:

  • 页眉、文章、页脚为 100% 高度(完成)
  • 标题为 400px 宽(完成)和内容左侧(完成)
  • 页脚宽度为 450 像素(完成)并位于文章的右侧(如何?)
  • 文章尽可能宽而不重叠页脚(如何?)

所以,我需要帮助来实现大胆的目标。我能做些什么来防止文章与页脚重叠?是否有其他方法来布局此页面,以便文章宽度随着内容的扩展而扩展?

  • 应该在 Chrome、Firefox 和 Safari 中工作(IE 和 Opera 是一个加号,但不是必需的)
  • 最好不要使用 JavaScript(或可能从规范中删除的 CSS 功能)
  • 简单、干净的 CSS 是理想的