我怎樣才能讓圖像不包含垂直空間？

我拉的圖像是相同的寬度，但不是相同的高度。我試圖在沒有增加垂直空間的行中顯示它們。我怎樣才能讓圖像不包含垂直空間？

例如，如果第1行的圖像分別爲100px150px和70px，我希望第二行的圖像直接出現在每個圖像下方的相應高度下。

現在，我已經浮動設置爲左側，它適用於水平顯示。添加一個清晰的：left會給出所需的效果，但將所有內容放在一個列中。我如何將圖像打包到左側，但在下面立即出現？

就像事情一樣，前3個圖像下面的圖像都會顯示在150px圖像下的相同線高度處，並且在100px和70px圖像下面有很大的垂直空間。

來源

2011-03-27 user678537

多挖掘一下後，就這麼讓我一直在尋找可能的組合jQuery和CSS。具體來說，jQuery砌體。

http://desandro.com/demo/masonry/docs/basic-single-column.html

來源

2011-03-27 14:11:24 user678537

如果您將它們顯示爲行，則圖像將按行排列，您無法做到這一點。

我認爲你寧願在列中顯示它們，這樣一列中的圖像不會影響其他列中的圖像。只需通過浮動它們並將圖像放在它們中間，就可以將列放在一起。

HTML：

<div class="column"> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div> 
<div class="column"> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div> 
<div class="column"> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

CSS：

.column { float: left; } 
.column img { display: block; }

來源

2011-03-27 01:45:40 Guffa

我會考慮，但因此很難通過列/使用清楚他們的風格，讓他們垂直對齊，因爲我贏了」圖像的數量會有所不同（他們是動態提取）通過網頁事先知道每列中會有多少圖像。 – user678537 2011-03-27 02:10:18

@ user678537：將第一張圖片放在第一列，第二張圖片放在第二列，等等。這比將圖像放在彼此之後要困難得多，但這就是你需要做的以擺脫水平空間。 – Guffa 2011-03-27 02:44:04

這都是動態的，沒有一個圖像是固定的或靜態的。我可能有一天有70個圖像，下一個有100個圖像，再加上它將相當於每個圖像的單獨查詢，我恐怕會成爲一個資源豬，因爲查詢拉他們是通過幾個選擇器開始。我只是堅持通過樣式來處理它，因爲我已經看到它在網站上完成（複製它們的樣式元素雖然不起作用） – user678537 2011-03-27 05:35:57

我怎樣才能讓圖像不包含垂直空間？

回答

相關問題