CSS列表浮法留下

沒有對齊，這是我的代碼：CSS列表浮法留下

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

我該如何解決這個問題？

來源

2016-09-30 Hansmagz

你能提供一個小提琴嗎？ – Aer0

沒有抱歉，我不能 – Hansmagz

嘗試看看她：http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do –

需要clearfix花車也float: left在.card-wrap

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

閱讀本clearfix

如果你有選擇總是使用Flexbox的

來源

2016-09-30 23:52:08 darham

添加

li { 
    vertical-align: top; 
}

（並且不浮點）

在你的CSS中，li被定義爲內嵌塊，默認情況下它們與它們的基線垂直對齊。這條規則將它們排列在頂部。

來源

2016-09-30 23:52:36 Johannes

CSS列表浮法留下

回答

相關問題