為什么圖片會影響文字?這和定義不符合
當(dāng)圖片的設(shè)置為 top ,文字設(shè)置 bottom ,文字會與圖片的底部對齊;
當(dāng)圖片的設(shè)置為bottom,文字設(shè)置bottom ,文字會比之前下沉;
這是什么原因?
當(dāng)圖片的設(shè)置為 top ,文字設(shè)置 bottom ,文字會與圖片的底部對齊;
當(dāng)圖片的設(shè)置為bottom,文字設(shè)置bottom ,文字會比之前下沉;
這是什么原因?
2018-11-30
舉報
2019-03-25
(1)當(dāng)圖片的設(shè)置為 top ,文字設(shè)置 bottom :
????首先不是說文字會與圖片的底部對齊,而是因為圖片太高,高于父容器的內(nèi)容高度,導(dǎo)致圖片對齊父容器的內(nèi)容文字頂部后撐開了父容器,使父容器高度變高,然后這時父容器的底部巧合和圖片底部在同一水平線,然后你就錯以為說它后面的文字是和圖片底部對齊了,實質(zhì)上是后面文字與父容器的底部對齊。你自己測試將圖片大小變小,小于父容器內(nèi)容高度,你就明白了,如下:
(2)當(dāng)圖片的設(shè)置為bottom,文字設(shè)置bottom:
????會下沉?沒感覺噢,我個人認(rèn)為是不會有下沉的,都會在同一條水平線上。
????假設(shè)父容器中不含有其他元素,只有自己的文字內(nèi)容,那它高度正是他的內(nèi)容高度,如下圖:
? ? 這時候給他內(nèi)容加一個圖片,設(shè)置vertical-align:bottom,圖片底部會和上面的內(nèi)容底部在同一水平線,如下圖:
????這時再在圖片后加一段文字(【span】display:inline-block;vertical-align:bottom),它一樣是會和父容器初始內(nèi)容底部在同一水平線,不會受到圖片的影響。如下圖:
????所以我感覺是你看錯了。
????好好琢磨透“只與父級有關(guān)系”這個還是很不錯的。
????以上為個人學(xué)習(xí)后的理解,如有錯誤,Emmm,哈哈哈哈哈,快來教懂我吧。