Css column-count sollte nur das erste Kind respektieren

Question

Ich versuche, die Anzahl der Spalten zu verwenden, um eine Art Kalenderwoche zu Benutzeraufgaben zu machen.

Das Hauptdiv der Woche hat die Eigenschaft der Spaltenzählung bis 7 und IMMER wird es 7 Kinder. Die sieben Tage dieser Woche. In diesen Tagen gibt es die Aufgaben, aber die Anzahl der Aufgaben ist variabel und es bricht die Spaltenanzahl Logik.

Warum Spaltenzählung nicht nur die ersten childs darin berücksichtigen?

Hier ist ein Beispiel dafür, was ich sagen will: https://jsfiddle.net/nby5ctb2/

Auf der zweite Liste, wollte ich die Aufgaben 1, 1.1 und 1.2 auf dem jeweils anderen, und wenn es keine Childs ist gerade diesen Tag überspringe.

Die CSS-I verwendet wurde, war nur dieses:

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

Dank weit fortgeschritten, dass

Answer 1

Sie scheinen den Zweck column-count zu haben falsch verstanden und daher ist es missbräuchlich.

Es ist Zweck, etwas Inhalt zu nehmen und es in die gegebene Anzahl von Spalten mit so nahe an gleichen Mengen von Inhalt wie möglich zu teilen. Das einzige Werkzeug, das Sie haben, ist break-inside:avoid, um "blockartigen" Inhalt zusammen zu halten.

Aber wenn Sie tun verwenden es eine Spalte größer als die anderen zu machen, Ihr machen alle Spalten die gleiche Höhe, weil das ist, was CSS Spalten tut. Wenn Sie also beispielsweise break-inside:avoid auf .day. verwenden, werden andere kürzere .day s in derselben Spalte angehäuft. Es würde nur funktionieren, wenn Tage in Ihrer Woche gleiche Mengen an Inhalten hätten, was eindeutig nicht der Fall ist.

Die erste Frage, die Ihnen in den Sinn kommt, ist: Warum nicht Flex verwenden? Da Sie wahrscheinlich möchten, dass die Breiten Ihres Tages gleich sind, müssen Sie den Kindern width hinzufügen. Standardmäßig haben display:flex Kinder flex: 0 1 auto, was sie je nach Inhalt flexibel macht.

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

Fiddle.

Answer 2

CSS Spalte ist nicht die beste Lösung zu erreichen. Es strebt an, den Inhalt von links nach rechts zu spalten, und was Sie verlangen, ist dagegen anzukämpfen.

Ich empfehle Ihnen, z. B. Flexbox, die das sehr einfach und mit besserer Browser-Unterstützung tut.

.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>