Float Div列表没有正确显示自动高度

Question

我有漂浮高度div，我不能用自动高度放置div。 因为当我将.item设置为自动高度时，列表的第二行显示不正确。

检查以下片段我尝试过但不能正常工作。它将显示如下。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我想要像......一样的东西 第三行设置为第二行。

Answer 1

您可以使用以下内容清除{4} float以后的item：

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

见下面的演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

最后我得到答案..！

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