Question

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

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

为什么列数不仅仅考虑其中的第一个孩子？

以下是我所说的一个例子：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专栏的作用。因此，例如，在break-inside:avoid上使用.day.会导致其他较短的.day在同一列中堆积。只有在你一周中的几天有相同数量的内容时，这才有效。显然情况并非如此。

首先要记住的问题是：为什么不使用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>

Css列数应该只尊重第一个孩子

2 个答案: