1代碼 ：鏈接描述
2 說明：
代碼：
<div class="container">
<div class="word">為了使大家更星期一)上迎大家屆時參加。</div> <div class="word">一、 應(yīng)吉爾吉斯共和坦進(jìn)行正式訪問并出十五次</div> <div class="div1"></div>
</div>
.div1 {
width: 200px;; height: 100px; background-color: #0d8ba1; float: left; }.word { background-color: #0e8f7c; width: 200px; height:200px; color: red; font-size: 20px;display: inline-block; border: 1px solid red; } -------------------------------
補(bǔ)充說明： .word {
background-color: #0e8f7c; width: 200px; height:200px; color: red; font-size: 20px;display: inline-block; border: 1px solid red; }前兩個div的樣式被設(shè)置為word樣式，并且注意到div的display被設(shè)置為inline-block，
3 問題：
（1）為什么顯示效果不會如下圖
（2）為什么不會如下顯示：
設(shè)置了inline-block屬性的.word具有inline的特性，自然出現(xiàn)在浮動元素的右方。
至于為什么不會如下顯示，是因?yàn)槠孑獾?code>float雖然脫離正常的文檔流，但其實(shí)還是占據(jù)內(nèi)容的。元素浮動后其他浮動元素，文本或者行內(nèi)元素圍繞它安放。
空白的原因是因?yàn)?code>.word沒有設(shè)置vertical-align屬性的話默認(rèn)是baseline。對齊方式默認(rèn)為父元素的基線。如果.word內(nèi)的字的行數(shù)是一樣的，自然是對齊的?；蛘咴O(shè)置.word的vertical-align為top，bottom,middle也可以對齊。
加載中...