Csscolumn-count首先要尊重child

Question

我正在尝试使用 column-count 为用户任务制作一种周历。

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

为什么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

CSS 专栏不是实现该目标的最佳解决方案。它努力使内容按列从左到右按顺序流动，而您所要求的就是与之抗争。

我建议您使用 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>

Answer 2

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

它的目的是获取一些内容并将其分成给定数量的列，其中的内容数量尽可能接近相等。您拥有的唯一工具是 break-inside:avoid 将 "block-like" 内容放在一起。

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

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

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

Fiddle.

Csscolumn-count首先要尊重child

Css column-count should respect only first child

css

flexbox

column-count