3

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

本周的主要 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;
}

感谢先进

4

2 回答 2

4

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

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

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

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

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

小提琴。

于 2017-06-10T14:49:59.150 回答
1

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

我推荐你使用 ie 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>

于 2017-06-10T14:49:08.720 回答