Mit absolut positionierten Kind div in ul

Question

Ich habe derzeit ein Problem mit der Verwendung von column-count mit einem absolut positionierten div als Kind.

ul { 
 
    column-count: 3; 
 
    margin-top: 50px; 
 
} 
 
ul > li { 
 
    position: relative; 
 
    height: 300px; 
 
    list-style: none; 
 
} 
 
ul > li > .child { 
 
    position: absolute; 
 
    top: -20px; 
 
}

<ul> 
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
</ul>

Wenn ein negatives top verwendet, scheint es den vorherigen Spalt zu wickeln, ist es trotzdem, dies zu umgehen?

Ich könnte width: 33% verwenden, aber das würde sich abhängig von der Anzahl der Spalten ändern, gibt es sowieso, um dies mit column-count zu tun?

Answer 1

Fügen Sie einfach -webkit-transform: translate3d(0, 0, 0); -webkit-column-break-inside: avoid;, um diese Arbeit zu machen

ul { 
 
    column-count: 3; 
 
    margin-top: 50px; 
 
} 
 
ul > li { 
 
    position: relative; 
 
    height: 300px; 
 
    list-style: none; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-column-break-inside: avoid; 
 
} 
 
ul > li > .child { 
 
    position: absolute; 
 
    top: -20px; 
 
}

<ul> 
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
</ul>