CSS列表浮动左

Question

未对齐，这是我的代码：

HTML：     

    <li><div class="card">
        <img src="uploads/image/default_profile.jpg" width="195" height="260" />
        <p><strong>Dr./BGen. Antonio L. Tamayo</strong><br>
<strong>AFP, FPCHA, Ph. D</strong></p>
        <p>Chairman of the Board and CEO<br>
Founder, University of Perpetual Help System DALTA</p>
    </div></li>

    <li><div class="card">
        <img src="uploads/image/default_profile.jpg" width="195" height="260" />
        <p><strong>Daisy M. Tamayo</strong><br><strong>RN, MAN, Ph. D</strong></p>
        <p>Vice Chairman and Treasurer<br>
Co-Founder, University of Perpetual Help System DALTA</p>
    </div></li>

</ul>

CSS：

ul.card-wrap
padding: 0

li
    font-size: 16px
    display: inline-block

.card
    width: 195px

但是当我把浮动：留在我的CSS上时发生这种情况：

它已对齐，但它已从容器中取出

ul.card-wrap
padding: 0

li
    float: left
    font-size: 16px
    display: inline-block

.card
    width: 195px

我该如何解决这个问题？

Answer 1

clearfix

还需要float: left个浮点数.card-wrap

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

阅读此clearfix

如果您可以选择始终使用 flexbox

Answer 2

添加

li {
  vertical-align: top;
}

（并且没有浮动）

在CSS中，li被定义为内联块，默认情况下垂直对齐其基线。这条规则将它们排在最顶层。