第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

為什么要往下推這個內(nèi)聯(lián)塊元素?

為什么要往下推這個內(nèi)聯(lián)塊元素?

千萬里不及你 2019-06-01 15:04:23
為什么要往下推這個內(nèi)聯(lián)塊元素?下面是我的代碼,我想了解為什么#FirstDiv正在被所有瀏覽器向下推。我真的很想理解為什么它被向下推而不是以某種方式向上拉的事實的內(nèi)在運作。(我知道如何對齊他們的頂部:)我知道它的溢出:隱藏的,這是導(dǎo)致它,但不確定它為什么要把它向下。body {  width: 350px;  margin: 0px auto;}#container {  border: 15px solid orange;}#firstDiv {  border: 10px solid brown;  display: inline-block;  width: 70px;  overflow: hidden;}#secondDiv {  border: 10px solid skyblue;  float: left;  width: 70px;}#thirdDiv {  display: inline-block;  border: 5px solid yellowgreen;}<div id="container">  <div id="firstDiv">FIRST</div>  <div id="secondDiv">SECOND</div>  <div id="thirdDiv">THIRD    <br>some more content<br> some more content  </div></div>http://jsfiddle.net/WGCyu/.
查看完整描述

4 回答

?
白衣非少年

TA貢獻1155條經(jīng)驗 獲得超0個贊

只管用vertical-align:top;

演示


查看完整回答
反對 回復(fù) 2019-06-01
?
回首憶惘然

TA貢獻1847條經(jīng)驗 獲得超11個贊

視點這,這個另一個例子。此類行為的原因?qū)⒃?/trans>CSS 3模塊:行:3.2。線箱包裝[1]:

一般來說,線框的起始邊緣與其包含塊的起始邊緣相接觸,而末端邊緣則觸及其包含塊的末端邊緣。但是,浮動框可能位于包含塊邊緣和行框邊緣之間。因此,雖然相同內(nèi)聯(lián)格式上下文中的行框通常具有相同的行內(nèi)推進(包含塊的行內(nèi)進度),但如果可用內(nèi)聯(lián)級數(shù)空間由于浮動而減少[.],則可能會有所不同。

如您所見,第三個元素被向下推,盡管它沒有overflow財產(chǎn)。原因肯定是在別的地方。您注意到的第二個行為在級聯(lián)樣式表2級修訂1(CSS 2.1)規(guī)范:9.5浮標(biāo)[2]:

由于浮點數(shù)不在流中,所以在浮點數(shù)框之前和之后創(chuàng)建的非定位塊框垂直地流動,就好像浮點數(shù)不存在一樣。但是,在浮點數(shù)旁邊創(chuàng)建的當(dāng)前和后續(xù)行框在必要時會被縮短,以便為浮動的邊距框騰出空間。

你所有的display:inline-block;DVS正在使用一種特殊的baseline在這種情況下10.8線高計算:“線高”和“垂直對齊”屬性(極尾)[3]:

“內(nèi)聯(lián)塊”的基線是其在正常流中的最后一行框的基線,除非它沒有流內(nèi)行框,或者它的“溢出”屬性具有“可見”以外的計算值,在這種情況下,基線是底部邊距。

所以當(dāng)你使用浮動元素inline-block元素時,浮動元素將被推送到旁邊,內(nèi)聯(lián)格式將根據(jù)1..另一方面,如果下一個元素不合適的話,它們就會被縮短。由于您已經(jīng)使用了最少的空間,因此沒有其他方法可以修改元素然后推送它們2..在這種情況下,最高元素將定義包裝div的大小,從而定義baseline 3中所述的位置和寬度的修改。2不能應(yīng)用于這種最小間距的最大高度元素。在這種情況下,我的第一個演示將產(chǎn)生一個行為。

最后,你overflow:hidden會防止#firstDiv被推到你的下邊#container雖然我找不到理由第11條..無overflow:hidden它的工作方式是例外的,并由23演示

TL;DR:仔細查看W3建議和瀏覽器中的實現(xiàn)。在我看來,浮動元素決定表現(xiàn)出意想不到的行為,如果您不知道它們對您周圍的元素所做的所有更改。這是另一個演示這顯示了浮標(biāo)的一個常見問題。


查看完整回答
反對 回復(fù) 2019-06-01
  • 4 回答
  • 0 關(guān)注
  • 523 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號