CSS - 「反轉」元素的浮動 - 如何將它們保持在底部？

我目前正面臨一個有趣的CSS問題，我無法在網上找到任何相關的問題。（？）CSS - 「反轉」元素的浮動 - 如何將它們保持在底部？

以下問題：我需要在位於左下角的圖像前面顯示一些圖標。由於圖標數量可能會有所不同，圖標會彼此相鄰浮動（每行最多三個 - 由寬度屬性定義）。

這裏是我的HTML代碼（包含圖標的DIV定位絕對在圖像）：

<div class="labels"> 
<ul> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
</ul>

和相關的CSS：

.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; } 
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; } 
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; }

爲了讓您的圖片它看起來像什麼，目標是什麼，我已經爲你劃傷了它：看到這裏（我不允許上傳圖片..）：link text

正如你所看到的圖標左側浮動，但顯然從頂部開始。這並不好，因爲我希望從左下方開始反向浮動，填充ul元素的寬度，然後繼續向下移動下一行。

任何想法如何解決這個問題？任何幫助非常感謝！

來源

2010-08-27 squarehouse

非常有趣的問題。我絕對正在尋找一個優雅的解決方案。 – 2010-08-28 12:26:50

恐怕沒有純CSS的方式來實現這一點。原則上，浮動總是從上到下與文檔佈局一樣。

你可以寫一些幫助方法來爲你生成這段標記。按照塊反向順序填充列表項並插入一些空的項目。或者，將幾個列表渲染到另一個下面。

來源

2010-08-27 15:46:29

你不能僅僅因爲CSS違反浮動規則而從CSS中獲得這種效果。

你可以做的是插入空的<li>，我們稱之爲'spacer'，它將填滿第1行第3個圖標的空間並將其餘內容向下推。

否則 - 您必須將<ul>分爲2個列表，並再次對齊所有內容。

來源

2010-08-27 15:46:43 rochal

嗯..這是一個可憐的 - 但感謝你的好的提示和你的想法。

我會去檢查一下是否可以用空的項目處理它（這在我看來並不是最好的方式），或者我把它們放在一個接一個的頂部。但第二件事情會變得很難以及名單需要絕對定位！..

謝謝你們。

來源

2010-08-28 07:40:55 squarehouse

display: flex; 
flex-direction: row-reverse;

我認爲這會有所幫助。

來源

2017-08-27 07:39:53 Ashraful

CSS - 「反轉」元素的浮動 - 如何將它們保持在底部？

回答

相關問題