HTML/CSS中的垂直單詞換行

如果我在div容器中有五個32x32像素的圖像，我可以很容易地將它們「自動換行」左右移動，並將它們組織成一排3個圖像，然後是兩行：HTML/CSS中的垂直單詞換行

<div style="max-width:96px"> 
    <img src="a.png"/> 
    <img src="b.png"/> 
    <img src="c.png"/> 
    <img src="d.png"/> 
    <img src="e.png"/> 
</div>

導致：

a b c 
d e

如果我減少股利64PX那麼的max-width我會看到

a b 
c d 
e

但是，有沒有我可以指定一個div的max-height並有圖片組織起來，像這樣：

a d 
b e 
c

因此，如果含有div的height實際上是可變的32x32的圖像將垂直堆疊直到沒有空間，然後開始一個新的專欄？

（理想情況下，我會在右側填充列和在左側填充未填充列，但對這些行的任何建議將不勝感激）。

謝謝

來源

2012-02-17 JP.

我發現[在線垂直佈局]（http://www3.telus.net/public/lchor/ovltext2011.htm），它很偏向於顯示中文字符，但它可能有一定的幫助。 – 2012-02-17 15:42:01

我不知道如果這是完全可能的常規（pre-v3）的CSS。你與文件「流動」戰鬥，這將顯示圖像作爲內聯，因此第一個安排。您可以嘗試CSS columns property - 但在舊版瀏覽器中無法使用。

這裏也可能有JavaScript解決方案，但我不知道我的頭頂有什麼。

來源

2012-02-17 15:34:38 chipcullen

HTML/CSS中的垂直單詞換行

回答

相關問題