CSS Clear nach jedem nth-Kind

Ich habe mehrere Elemente mit gleicher Breite in einem Container. Aufgrund der unterschiedlichen Höhen der Elemente besteht ein Problem mit der Ausrichtung, siehe Abbildung unten.CSS Clear nach jedem nth-Kind

Ich möchte nach jedem 3. Artikel ohne Änderung der HTML Markup löschen, so dass der vierte Artikel in die nächste Zeile geht. Ich versuche nth-child (3) hinzuzufügen: nach, aber scheint nicht zu funktionieren.

enter image description here

Hier ist der Code:

HTML:

<div class="list"> 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
    <div class="item">Lorem ipsum dolor sit amet</div> 
</div>

CSS:

.item:nth-child(3):after{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

Demo: http://jsfiddle.net/KPXyw/

Quelle

2014-02-25 user966582

Eigentlich ist es

.item:nth-child(3n+1){ 
    clear:left 
}

Quelle

2014-02-25 12:21:26 sabof

+1 für den richtigen Gebrauch :) – Dipak

Solange sie alle die Klasse '.item' haben. Sonst '.list div: nth-child (3n + 1)' oder nur '.list: nth-child (3n + 1)'. –

Sie sollten nth-child(3n+1) verwenden, so dass es bei jedes Kind nach einem Kind mehr von 3 geschieht, nicht nur auf dem ersten 3.e Kind.

Dann sollten Sie das :after entfernen, möchten Sie das tatsächliche Kind löschen.

Quelle

2014-02-25 12:18:29 linkyndy

.item:nth-child(3n+1){ 
    clear:left 
}

Updated Fiddle

Quelle

2014-02-25 12:18:48

-2

Verwenden Sie den folgenden Code

.item:nth-child(4){clear:both;}

Quelle

2014-02-25 12:23:37

Um zu erklären, warum dies nicht funktioniert: Wenn Sie nach jedem vierten Element löschen, würde es das 3-Spalten-Raster als 8 wegwerfen.Element ist nicht das erste Element in der zweiten Zeile, aber das zweite. Deshalb verwenden Sie 3n + 1. Es dauert jedes dritte Element und erhöht eins. Hier ist ein großartiger Artikel darüber, wie diese Mathematik funktioniert. http://css-tricks.com/how-nth-child-works/ –

-1

dies versuchen, seine Arbeit

.list{ 
    width: 300px; 
    overflow: hidden; 
} 

.item{ 
    float: left; 
    width: 90px; 
    background: yellow; 
    margin-right: 5px; 
    margin-bottom: 10px; 
} 

.item:nth-child(4){ 
    //background: brown; 
    clear:both; 
}

diese nur brauchen.

Quelle

2014-02-25 12:24:26 next2u

why down vote funktioniert, muss erneut abgespielt werden – next2u

Es funktioniert nicht, wenn Sie mehr Zeilen mit '.item's gefüllt haben. Dies liegt daran, dass Sie in der "nth-child" -Regel "4" angegeben haben, was nur für ** und nur für das vierte Element gilt. – linkyndy

Ich versuchte es mit mehr Items und es funktionierte, deshalb poste ich die Antwort. Es kann von der Breite des Elements sein (Breite ist für .item angegeben). Was auch immer es ist, hat es für diese Frage gearbeitet. Ich habe die Antwort dieser speziellen Frage nicht für allgemein bekanntgegeben. Und Sie haben auch Recht, das zu akzeptieren. – next2u

sabof ist richtig. Aber es wird toll sein, wenn Sie display: inline-block anstelle von float:left verwenden. Siehe unten zum Beispiel.

.list { 
 
    width: 300px; 
 
    font-size: 0; 
 
} 
 
.item { 
 
    display: inline-block; 
 
    width: 90px; 
 
    font-size: 16px; 
 
    background: yellow; 
 
    margin-right: 5px; 
 
    margin-bottom: 10px; 
 
    vertical-align: top; 
 
}

<div class="list"> 
 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
 
    <div class="item">Lorem ipsum dolor sit amet</div> 
 
</div>

Quelle

2015-03-25 06:36:03 w3debugger

können Sie verwenden:

.list { 
    display:flex; 
    flex-wrap: wrap; 
    ... 
}

Siehe unten:

.list { 
 
    width: 300px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.item { 
 
    float: left; 
 
    width: 90px; 
 
    background: yellow; 
 
    margin-right: 5px; 
 
    margin-bottom: 10px; 
 
} 
 
.item:nth-child(3) { 
 
    background: brown; 
 
} 
 
.item:nth-child(3):after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
}

<div class="list"> 
 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
 
    <div class="item">Lorem ipsum dolor sit amet,</div> 
 
    <div class="item">Lorem ipsum dolor sit amet</div> 
 
</div>

Quelle

2017-01-12 12:55:50

CSS Clear nach jedem nth-Kind

Antwort

Verwandte Themen