Float Div 列表无法正确显示自动高度

Question

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

检查以下代码片段我试过但没有 work.It 将显示如下。

.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

您可以在 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>

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>

Float Div 列表无法正确显示自动高度

Float Div list not proper display with auto height

html

css

list

css-float

display