Css column-count 应该只尊重第一个 child

Question

我正在尝试使用列数为用户任务制作一种周历。

本周的主要 div 的列数属性为 7，并且总是有 7 个子元素。本周的七天。这几天里面有任务，但是任务的数量是可变的，它打破了列计数逻辑。

为什么 column-count 不只考虑其中的第一个 child ？

这是我所说的示例:https://jsfiddle.net/nby5ctb2/

在第二个列表中，我希望任务 1、1.1 和 1.2 彼此重叠，当没有 child 时就跳过这些天。

我使用的 css 是这样的:

.week {
    -moz-column-count: 7;
    -webkit-column-count: 7;
    column-count: 7;
}

先谢过

Answer 1

您似乎误解了 column-count 的用途，因此误用了它。

它的目的是获取一些内容并将其分成给定数量的列，这些列的数量尽可能接近相等。您拥有的唯一工具是 break-inside:avoid 以将“ block 状”内容保持在一起。

但是，如果您确实使用它使一列比其他列高，那么您就是在使所有列的高度相同 ，因为这就是 CSS 列的作用。因此，例如，在 .day. 上使用 break-inside:avoid 会导致其他较短的 .day 堆积在同一列中.它只有在你一周中的几天内容量相等的情况下才有效，但显然情况并非如此。

首先想到的问题是:为什么不使用 flex？由于您可能希望一天的宽度相等，因此您需要将 width 添加到子项中。默认情况下，display:flex children 有 flex: 0 1 auto，这使得它们灵活，取决于内容。

.week {
    display: flex;
}
.week > * {
  width: calc(100% / 7)
}

Fiddle .