inline block並列排序時候的影響

2022-05-04 01:39:13 字數 1110 閱讀 7586

當兩個設定了inline-block屬性的元素並列排放時,它們的位置能夠互相影響。

元素結構:13

我們使三個div都設定為 inline-block,設定寬度使其居於一行內。如果再把 container-demo2 中的內容注釋掉,我們可以看到一種十分詭異的情況,如圖。

可以發現本該位於父容器頂端的demo1和demo3居然沉了下去,而沒有內容的demo2還在正常位置上。這時候就會想:肯定是元素的內容造成了這種結果。那麼我們現在給demo2加上內容看看效果:

可以看到三個元素都回到了我們想讓它呈現的位置。那為什麼inline-block元素的位置會受到其內容的影響呢?我們可以查到這樣一句話:inline-block元素可以將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。有了這樣的屬性,我們就可以在表現上將物件用作內斂元素但又可以對它進行寬高設定。但有一點需要注意的是物件仍然呈遞為內聯元素,而同一行內的內聯元素預設是基於 baseline 對齊的,我們可以在1圖中標記出來:

即圖中的藍色線條,具體的我們可以去檢視w3c的 vertical-align 屬性。好的,基於基線對齊的模式我們有了理解,但還有乙個問題:為什麼3個元素的方向不是相同的呢?為什麼有內容的元素向下,而無內容的元素會向上呢?就此我們需要了解css渲染機制:對於乙個inline-block元素,如果內部沒有inline內聯元素,或者overflow不是visible,則該元素的基線就是它margin的底邊緣,否則就是元素內部最後一行內聯元素的基線。

簡單地就以上這種情況來說,沒有內容的demo2會基於它的margin底邊緣也就是它的下邊緣對齊,而包含內容的demo1和demo3會基於其內部內聯元素的基線對齊,所以會造成這種一上一下的情況。

解決辦法:

1、暴力float,當然這是備選方案,畢竟脫離文件流後頁面元素會不好控制

2、簡單粗暴地給所有元素都加上內容,例如空格符

3、設定所有內聯元素 vertical-align: top/middle/bottom; 屬性,改變預設設定

氣泡排序 Problem 並列排名

氣泡排序原理就是 如果有n個數,相鄰的兩個數進行比較,就是1號和2號,2號和3號 n 1號和n號比較,每次比較確定乙個數的位置。也就是第乙個輪迴比較n 1次,第二個就比較n 2次,直到只需要比較兩個數為止。核心部分就是雙重巢狀迴圈,但是從這可以看出它的時間複雜度是o n 2 複雜度很高。下面舉乙個例...

結構體並列儲存資料方便排序

今天做題遇到了這樣一種情況 每個人有初始資料a,b 當排序的時候,我們依照a進行排序,但是b的順序也要跟著a的順序改變,這時應該怎麼做?參考題目 該題中不僅要按照每個人的時間公升序排序,還要輸出每個人原來的序號,因此,一般的想法是建立乙個結構來儲存資料,然後利用sort排序,如下 include i...

查詢合併列

select c.gid,c.stuname,d.pargid,d.parname from2 select 3a.gid a.name asstuname 4from base user a5 asc6left join7 select 8a.gid b.pargid,9a.name asparn...