創建與對方

我試圖做出與對方很好連接圖像的網格連接圖像的網格。創建與對方

這裏是我的網格： http://www.yannickluijten.be/test2

不是每個圖像具有相同的高度，這就是問題所在：我想第4圖像（灰色）出現在第一圖像的下方（綠色），我不我想要使用3列。我怎樣才能做到這一點？

.img1 { 
    width: 300px; 
    height: 200px; 
    float: left; 
    background: green; 
} 

.img2 { 
    width: 300px; 
    height: 400px; 
    float: left; 
    background: blue; 
} 

.img3 { 
    width: 300px; 
    height: 300px; 
    float: left; 
    background: yellow; 
} 

.img4 { 
    width: 300px; 
    height: 400px; 
    float: left; 
    background: gray; 
}

來源

2013-03-24 Ruud Luijten

一旦藍色方塊獲得浮動有這樣，下面的綠色盒子的空間下降到藍盒子的邊緣變得不可用（不能充滿，除非你絕對位置的東西在那裏）。你有沒有考慮過使用三列布局而不是浮動事物？ – animuson 2013-03-24 17:12:54

也許這樣http://css-tricks.com/seamless-responsive-photo-grid/？（僅適用於現代瀏覽器） – 2013-03-24 17:14:27

我真正想做的是從我的tumblr帳戶自動加載圖像，並將它們放入這樣的網格中。所以三列布局是不可能的，因爲我只有一個JavaScript鏈接，我必須實現（這已經工作，鏈接更新）。我怎樣才能做到絕對位置？ – 2013-03-24 17:25:08

使用CSS花車，沒有辦法控制時高度可變的浮動元素應該「環繞」的左邊緣，而不會引起不必要的垂直間距一些人之間出現。

馬賽克插件一樣jQuery Masonry是面向這樣的事情。不確定它是否允許您控制哪個照片顯示在哪個列中，但它可以正常工作。

你可以使用CSS columns，但它提供了該照片應該出現在哪一列，它不會在IE9或更早的工作有限的控制。

來源

2013-03-24 17:37:05

.img4 { 
width: 300px; 
height: 400px; 
float: left; 
background: gray; 
clear: both; 
}

第四圖像來在第一行，但不完全是在第一圖像下。

來源

2013-03-24 17:23:16 Venugopal

回答

相關問題