mehrspaltigen Layout-auf gleicher Höhe beginnen

Wie Sie das zweite Element sehen können, ist 35px niedriger als die drei anderen Elemente. Der Grund dafür ist, dass jedes Element eine margin-bottom: 35px; hat. Aber warum wird es an die Spitze angehängt? Wenn ich display: inline-block hinzufügen kann ich das verhindern, aber dann brechen die Spalten nach dem zweiten ...

Wie kann ich das beheben?

#items { 
 
    display: block; 
 
    column-width: 3rem; 
 
    column-gap: .35rem; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
} 
 
#items.show { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
#items .item { 
 
    width: 100%; 
 
    margin: 0 0 .35rem; 
 
    padding: 0; 
 
    display: inline-block; 
 
    column-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
}

<div class='show' id='items'> 
 
    <div class='item'></div> 
 
    <div class='item'></div> 
 
    <div class='item'></div> 
 
</div>

Zusätzlich habe ich nur dieses Problem in Chrome; Firefox und Microsoft Edge funktionieren gut.

Quelle

2016-10-21 jonhue

Mit Display: Inline-Block, versuchen Rand-rechts: -4px.

Dies ist ein bekannter Display Inline-Block Problem

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Quelle

2016-10-21 15:18:37 joncodo

hmm ... ändert nichts – jonhue

denke ich, dass für mich nicht der Fall ist, weil mit 'Inline-block' es bricht nach 2 Spalten, aber wenn ich zwei Zeilen abgeschlossen habe, beginnt es wieder in der Sec-Spalte und so weiter und so weiter. Es ist eine seltsame Sache, die ich noch nie zuvor gesehen habe ... – jonhue

Zusätzlich habe ich nur dieses Problem in Chrome, Firefox und Edge funktioniert gut – jonhue

mehrspaltigen Layout-auf gleicher Höhe beginnen

Antwort

Verwandte Themen