如何将行保持在水平线上？

Question

这是我的代码：

＆＃13;

＆＃13;

div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

＆＃13;

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>

＆＃13;

＆＃13;

＆＃13;

请参阅？一切都安排得很整齐。一切都很好。但是当一个盒子的高度比其他人高时，行将交织（无序）。看到：

＆＃13;

＆＃13;

div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

＆＃13;

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever   whatever   whatever   whatever   whatever   whatever   whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>

＆＃13;

＆＃13;

＆＃13;

如何将行保持在同一行？

Answer 1

您可以使用FlexBox：

＆＃13;

＆＃13;

.wrapper div {
  width: 30.33%;
  min-width: 150px;
  padding: 6px;
}
.wrapper{
display: flex;
flex-wrap:wrap;
}

＆＃13;

<div class="wrapper">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需为每一行添加额外的div。

以下是一个工作示例

＆＃13;

＆＃13;

.row {
  clear: both;
}

.row div {
  float: left;
  width: 30.33%;
  min-width: 150px;
  padding: 6px;
}

＆＃13;

<div class="row">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>
<div class="row">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

您也可以使用flexbox，但支持率低于float。您可以查看哪些浏览器兼容here

Answer 3

将display: flex;和flex-wrap: wrap;添加到33.3％宽度div周围的任何包装div

＆＃13;

＆＃13;

body {    
display: flex;
flex-wrap: wrap;
}
div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

＆＃13;

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever   whatever   whatever   whatever   whatever   whatever   whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以使用一个表/你可以添加一个属性给你css高度一些固定的高度。然后这个问题就会得到解决。