HTML/CSS圖像網格排列圖像

我正在製作一個網站使用HTML和CSS，我開始創建一個部分，將保存9個不同大小的圖像。在我製作了所有不同的尺寸並將它們插入到網站後，並沒有發現我想要的。我希望它會變成這樣的： Image of grid I was hoping for HTML/CSS圖像網格排列圖像

section { 
 
    background-color: black; 
 
    width: 1346px; 
 
    height: 400px; 
 
    float: left; 
 
}

<section> 
 
    <img src="http://s30.postimg.org/njfrtgaoh/300x200.png" align="top-right" alt="" /> 
 
    <img src="http://s11.postimg.org/v0d12pcyr/200x100_2.png" align="top" alt="" /> 
 
    <img src="http://s22.postimg.org/s8jfeeiep/500x400.png" align="top-right" alt="" /> 
 
    <img src="http://s22.postimg.org/uxiti6d9t/200x200_2.png" align="top-right" alt="" /> 
 
    <img src="http://s13.postimg.org/463k9fm8j/146x100.png" align="top" alt="" /> 
 
    <img src="http://s14.postimg.org/prasnic9d/200x100.png" align="top" alt="" /> 
 
    <img src="http://s30.postimg.org/hz3aitbtd/500x200.png" align="top-right" alt="" /> 
 
    <img src="http://s8.postimg.org/56vmkw3kl/200x200.png" align="top-right" alt="" /> 
 
    <img src="http://s23.postimg.org/670g2cmaz/146x300.png" align="top" alt="" /> 
 
</section>

隨着圖像，你將不得不尋找和imagen畫質他們，但有點向右所以它會適合

。

來源

2016-03-01 Morgan Clarke

我知道你正在尋找的HTML/CSS的方式來實現這一目標，我不確定你是否能夠像那樣得到它。一個更簡單的方法將使用像http://vnjs.net/www/project/freewall/ –

我會推薦使用像Masonry.js插件。你仍然可以用css和html重現這一點。我會推薦使用像引導一樣的CSS框架。 –

您必須考慮使用Masonry.js。
看一看這個例子：http://codepen.io/desandro/pen/vLeBLV

<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.js"></script>

來源

2016-03-01 19:16:32 Federico

謝謝，我剛剛嘗試過這種方式，並將其放入div中，但無效。有任何想法嗎？ –

您可以從這個撥弄我爲你做的工作：https://jsfiddle.net/vc7tdpzz/

var container = document.querySelector('#grid'); 
    var masonry = new Masonry(container, { 
    columnWidth: 100, 
    itemSelector: '.grid-item' 
    });

來源

2016-03-01 20:38:18 Federico

好的，謝謝你，我終於設法在一個半小時的時間裏找到了第一層。這只是第二層，我似乎無法把它變成一個完整的矩形。 **您可能需要創建一個.html文件才能看到它。** [jsfiddle]（https://jsfiddle.net/midwackcan/u5ue8the/） –

HTML/CSS圖像網格排列圖像

回答

相關問題