css實現多個div在同一行並且div中內容可斷行

2021-09-05 09:35:25 字數 976 閱讀 7399

實現效果:

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

l-測試測試 (99.5%-99.08%) 單位:kg

重點: box-flex 屬性

Div在同一行顯示

用div控制元素排版有時候還是弄不明白,不過用 的方式還是比較方便解決的,div排版留著有時間在研究,下面的方式也能解決問題的,可參考下 一般我們在做網頁的時候如果放兩個div,那在顯示的時候這兩個div是在列的方面上顯示的,也就是第二個div顯示在第乙個的下面,如果我們想要讓這兩個div在行的方向...

css用浮動的方法讓div在同一行

由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。如果在頁面中輸入了3個div 標籤,因為div是塊級元素,所以這3個div各佔一行,但是你為第乙個div設定了float right 浮動是第乙個div脫離就正常的文件流,所以第乙個div的位置空間 也就空了出來,下面...

學習雜記(如何讓兩個div在同一行)

時不時會要記著一些東西,以防自己忘記總結。css浮動 div是塊級元素,在頁面中獨佔一行,自上而下排列,也就是傳說中的流。在div的標準流中,無論div多小,它都獨佔一行,相互沒有交集。但是很多地方要使兩個或者多個div處於一行,這時候要對操作div設定浮動屬性。設定浮動後就不再屬於標準流,成為乙個...