類似微博大v的文字居中,v根據文字字數而改變做法

2021-08-20 11:42:32 字數 884 閱讀 6443

首先來看一下需求

我們要實現類似這種的微博大v,文字要居中,並且圖示v要隨文字字數改變而跟隨

w3c對於position的解釋是

position 屬性規定元素的定位型別。

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

以及這篇文章裡面的介紹 absolute絕對定位的非絕對定位用法

大致可以了解到:絕對定位 absolute 他的特性就像寬高都脫離文件流的浮動一樣,當他設定了 position:absolute; 但沒有設定 top,left 等值的時候,他可以當作乙個高階版的浮動來用,來實現一些自適應布局,利用這個特性,我們微博大v的需求就可以做了。

利用 absolute 的類浮動特性,將 文字和圖示 用行內元素 span和img 包裹,text-align: center 居中文字,給img 單獨設定 position:absolute; 不給 top left,圖示就會由於浮動而緊挨在文字旁邊。

文字文字

關鍵:將名字寫成span

給 v 加 position: absolute; 

類似的像

這種功能的也能用同樣的方法實現

將設定 絕對定位屬性,右邊的兩行文字因為的浮動,就只需要設定margin或者padding就能實現這種效果,不過因為這個的位置在最左邊,實際上也能通過浮動達到相同的效果。

微博大V爆料華為12GB記憶體機型回歸 最快本月恢復

眾所周知,斷供對華為的手機業務影響很大,今年推出p50程式設計客棧系列手機很不容易,大家可能會注意到p50系列記憶體主推型號也就是8gb,12gb的機型非常少或者直接無貨,這主要也是因為各種限制所致。好訊息是華為的情況有所改善,最快本月底就會有12gb記憶體的機ainju型恢復。微博大v 菊廠影業f...

類似微信的文字輸入框

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!首先,這種效果用.9圖我不知道是否可以做出來。如果不用.9圖的話,那就只能用drawable來寫,這種drawable有點複雜,可以採用layerlist來實現,我的思想如下 分三層實現,這裡假設activity的背景是白色,第一層也 就是最底層 ...

類似微信的文字輸入框

首先,這種效果用.9圖我不知道是否可以做出來。如果不用.9圖的話,那就只能用drawable來寫,這種drawable有點複雜,可以採用layerlist來實現,我的思想如下 分三層實現,這裡假設activity的背景是白色,第一層也 就是最底層 是綠色 第二次是白色,但是距離底部有一段小偏移,目的...