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

Question

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

本周的主 div 的 column-count 属性为 7，并且总是有 7 个孩子。本周的第 7 天。 这几天有任务，但任务的数量是可变的，它打破了列数逻辑。

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

这是我所说的一个例子：https://jsfiddle.net/nby5ctb2/

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

我使用的 css 是这样的：

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

感谢先进

Answer 1

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

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

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

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

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

Fiddle.

Answer 2

CSS Column 并不是实现这一目标的最佳解决方案。它力求从左到右明智地流动内容列，而您所要求的就是与之抗争。

我推荐你使用即 Flexbox，它做起来非常简单，并且有更好的浏览器支持。

.week {
  display: flex;
  flex-wrap: wrap;
}
.week .day {
  flex-basis: calc(100% / 7);
  word-break: break-all;
  overflow: hidden;
}

This works
<div class='week'>
    <div class="day">
        <div class="task" >Task 1</div>
    </div>
    <div class="day">
        <div class="task" >Task 2</div>
    </div>
    <div class="day">
        <div class="task" >Task 3</div>
    </div>
    <div class="day">
        <div class="task" >Task 4</div>
    </div>
    <div class="day">
        <div class="task" >Task 5</div>
    </div>
    <div class="day">
        <div class="task" >Task 6</div>
    </div>
    <div class="day">
        <div class="task" >Task 7</div>
    </div>
</div>

<br />
<br />

This <strike>doesn't</strike> work too, now
<div class='week'>
    <div class="day">
        <div class="task" >Task 1</div>
        <div class="task" >Task 1.1</div>
        <div class="task" >Task 1.2</div>
    </div>
    <div class="day">
        <div class="task" >Task 2</div>
    </div>
    <div class="day">
    </div>
    <div class="day">
    </div>
    <div class="day">
        <div class="task" >Task 5</div>
        <div class="task" >Task 5.1</div>
    </div>
    <div class="day">
    </div>
    <div class="day">
    </div>
</div>