浮動小数点のリストが正しく表示されず、自動高さが表示されない

Question

浮動高さdivがあるため、自動高さでdivを配置できません。 .itemをautoに設定すると、リストの2行目が適切な表示にならないためです。

次のスニペットをチェックしてみましたが、うまくいきませんでした。以下のように表示されます。

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

しかし、私は何かのような...
三行目は、二行目に設定されたいです。

Answer 1

最終的に私は答えを得ます...！

.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

あなたが使用して4 item秒後にfloat秒をクリアすることができます。

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

デモは、以下を参照してください：

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