Float Div Liste nicht richtige Anzeige mit Autohöhe

Question

Ich habe schwebende Höhe div, ich kann nicht div mit automatischer Höhe platzieren. Weil, wenn ich .item auf Höhe Auto setze, dann zweite Zeile der Liste ist nicht richtige Anzeige.

Überprüfen Sie folgende Snippet Ich habe versucht, aber nicht arbeiten.Es wird wie folgt angezeigt.

.main{ 
 
    display:block; 
 
    width:100%; 
 
} 
 
.item{ 
 
    float:left; 
 
    width:24%; 
 
    border:1px solid #999; 
 
}

<div class="main"> 
 
    <div class='item'>1. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>2. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>3. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>4. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>5. it's is good day ...!it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>6. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>7. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>8. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>9. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>10. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>11. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>12. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>13. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>14. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>15. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>17. it's is good day ...!it's is good day ...!</div> 
 
</div>

Aber ich möchte so etwas wie ...
Die dritte Zeile zweite Zeile gesetzt.

Answer 1

Schließlich bekomme ich die Antwort ..!

.main{ 
 
    display: -webkit-flex; 
 
    -webkit-flex-wrap: wrap; 
 
    display: -ms-flexbox; 
 
    -ms-flex-wrap: wrap; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    width:100%; 
 
} 
 
.item{ 
 
    float:left; 
 
    width:24%; 
 
    border:1px solid #999; 
 
}

<div class="main"> 
 
    <div class='item'>1. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>2. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>3. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>4. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>5. it's is good day ...!it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>6. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>7. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>8. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>9. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>10. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>11. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>12. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>13. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>14. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>15. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>17. it's is good day ...!it's is good day ...!</div> 
 
</div>

Answer 2

können Sie löschen die float s nach 4 item s unter Verwendung von:

<div style="clear:both"></div> 

Demo Siehe unten:

.main { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.item { 
 
    float: left; 
 
    width: 24%; 
 
    border: 1px solid #999; 
 
}

<div class="main"> 
 
    <div class='item'>1. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>2. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>3. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>4. it's is good day ...!it's is good day ...!</div> 
 
    <div style="clear:both"></div> 
 
    <div class='item'>5. it's is good day ...!it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>6. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>7. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>8. it's is good day ...!it's is good day ...!</div> 
 
    <div style="clear:both"></div> 
 
    <div class='item'>9. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>10. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>11. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>12. it's is good day ...!it's is good day ...!</div> 
 
    <div style="clear:both"></div> 
 
    <div class='item'>13. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>14. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>15. it's is good day ...!it's is good day ...!</div> 
 
    <div class='item'>17. it's is good day ...!it's is good day ...!</div> 
 
</div>