Css列计数应只考虑第一个子项

我正在尝试使用列计数为用户任务创建一种周日历

星期的主div的属性是column count为7，并且总是有7个child。本周的七天。 在这段时间里，有任务，但任务的数量是可变的，这打破了列计数逻辑

为什么列计数不考虑里面的第一个孩子？

下面是我要说的一个例子：

在第二个列表中，我希望任务1、1.1和1.2相互重叠，如果没有孩子，就跳过这一天

我使用的css就是这样：

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

---

感谢高级

CSS列并不是实现这一点的最佳解决方案。它致力于从左到右的内容列的流动，而您所要求的是与之抗争

我建议您使用I.e.Flexbox，它非常简单，并且具有更好的浏览器支持

.week{
显示器：flex；
柔性包装：包装；
}
.周.日{
弹性基础：计算（100%/7）；
单词break：打破一切；
溢出：隐藏；
}

这很有效
任务1
任务2
任务3
任务4
任务5
任务6
任务7




现在这也不行了
任务1
任务1.1
任务1.2
任务2
任务5
任务5.1

您似乎误解了

列计数的目的，因此误用了它

它的目的是获取一些内容，并将其划分为给定数量的列，内容量尽可能接近相等。您唯一的工具是
内部中断：避免
将“类似块”的内容保持在一起

但是，如果您使用它使一列比其他列高，则会使所有列的高度相同，因为CSS列就是这样做的。因此，例如，在
.day使用
break-inside:avoid
。
将导致其他较短的
.day
堆积在同一列中。只有当你一周中的几天内容量相等时，它才会起作用，但事实显然并非如此

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

.week{
显示器：flex；
}
.week>*{
宽度：计算（100%/7）
}

.
请您展示一下您正在使用的（）HTML和CSS，这样我们就可以看到您正在处理的内容，并希望能够理解您的问题。哦，我忘了。我会举个例子。抱歉^^您需要重置child上的display，以避免它们跨列。此操作的平均CSS规则无效，display:inline块将完成此操作，您还需要添加宽度以填充整个列的宽度@GCyrillus没有给出7列（在我的Chrome上）@LGSon，我想这就是为什么它仍然是实验性的，即将出现；）GTMA，LGSon.：）。您可能希望使children
flex:0 0 calc（100%/7）
，因为一个人希望将一个星期放置在另一个星期的下面，以便在几天内具有相同的宽度。所以我认为
width
更适合这里。另请注意，IE在
flex basis
中的
calc
方面存在一些问题。不确定这是否仍然是一个问题，这是几个月前的事了。@AndreiGheorghiu做了
flex:0 calc（100%/7）
使IE折叠了列…现在，一切正常，谢谢你的提示，所以当
flex-basis
以速记方式指定时，它只在
flex-basis
上存在
calc
问题？我不知道。事实上，我记得有一个案例，我确实需要
calc
inside
flex basis
，但我从未想过要从速记语法切换到单独的属性。很高兴知道我还能用。非常感谢。然而，根据内容的不同，使用弹性基础仍然会使日的宽度不相等，对吗？这不是必须的，但从每周的展示来看，这是一个合理的期望。因此，您需要在此处使用
max width
。@AndreiGheorghiu使用
width
或
flex basis
与内容是否会溢出（如很长的单词或图像）无关，出现这种情况时，使用
width
内容将溢出到下一列，使用
flex basis
，第7个元素将被推到下一行。解决方法是使用
overflow:hidden
，因此在这种情况下
width
不会更好，而且
flex-basis
不会使
天数不相等。。。。也不需要
max width
：）@AndreiGheorghiu还可以添加
flex grow:0
，以克服列宽度不相等的问题，尽管如果内容溢出的原因与前面的评论中提到的原因相同，那么仍然需要
溢出：隐藏。太不可思议了。我不知道显示器的弹性。非常感谢你。这正是我想要的^^^如果内容溢出，您还需要
溢出：隐藏
。。。和/或
word break:break all
如果期望长单词或只有文本（可能有长单词）@LGSon从我的角度看，内容溢出是一个完全不同的问题，与此无关。我在
flex-width
上的评论是指一天包含20个单词，另一天包含1个单词的情况。flexbox对
宽度
没有限制，使内容较多的
.day
比内容较少的日子更宽。同意？是的，
flex-grow:0
也是防止这种情况的一种选择。但是，因为它是
1
默认值，所以需要设置：）。@AndreiGheorghiu你绝对疯了。。。