亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

浮動布局,如何確定浮動元素向上浮動的時候什么時候停止向上浮動

浮動布局,如何確定浮動元素向上浮動的時候什么時候停止向上浮動

藍山帝景 2018-09-11 17:45:24
1 代碼 :鏈接描述2 說明:代碼:<div class="container"><div class="word">為了使大家更星期一)上迎大家屆時參加。</div> <div class="word">一、 應吉爾吉斯共和坦進行正式訪問并出十五次</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;    }    -------------------------------補充說明: .word {        background-color: #0e8f7c;        width: 200px;        height:200px;        color: red;        font-size: 20px;        display: inline-block;        border: 1px solid red;    }        前兩個div的樣式被設置為word樣式,并且注意到div的display被設置為inline-block,    3 問題:(1)為什么顯示效果不會如下圖(2)為什么不會如下顯示:
查看完整描述

1 回答

?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

空白的原因是因為.word沒有設置vertical-align屬性的話默認是baseline。對齊方式默認為父元素的基線。
如果.word內的字的行數是一樣的,自然是對齊的。
或者設置.wordvertical-aligntopbottom,middle也可以對齊。

至于為什么不會如下顯示,是因為奇葩的float雖然脫離正常的文檔流,但其實還是占據內容的。
元素浮動后其他浮動元素,文本或者行內元素圍繞它安放。

設置了inline-block屬性的.word具有inline的特性,自然出現在浮動元素的右方。


查看完整回答
反對 回復 2018-10-23
  • 1 回答
  • 0 關注
  • 787 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號