我可以通過砌體實現這種佈局嗎？

我想是這樣的：

.grid { 
    width: 99%; 
    border: 1px solid #ccc; 
} 
.grid a, .grid .grid-sizer { 
    display: inline-block; 
    width: 20%; 
    padding-bottom: 20%; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 
.grid a.wx2, .grid .grid-sizer.wx2 { 
    width: 45%; 
} 
.grid a.hx2, .grid .grid-sizer.hx2 { 
    padding-bottom: 66%; 
} 
.grid a.wx2.hx2, .grid .grid-sizer.wx2.hx2 { 
    padding-bottom: 33%; 
}

而且

$(function() { 
    $('.grid').masonry({ 
     columnWidth: '.grid-sizer', 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     isFitWidth: true, 
     gutter: 10 
    }); 
});

，但它不是使用完整的寬度avaliable，

任何想法，我缺少的是什麼？

見的jsfiddle

https://jsfiddle.net/6dL7x8uk/1/

來源

2015-10-21 Toni Michel Caubet

-1

當然可以。小提琴缺少很多東西。我會做這樣的：

<div class="wrap"> 
<div class="children">

http://codepen.io/damianocel/pen/ZbvVmX

來源

2015-10-21 13:14:26

我不認爲你已經包括了正確的鏈接？它看起來不像我的問題的修復.. –

是的，這是一個完全不同的方法。但是同樣的結果，當我回家時，我會看看如何用你的方法做到這一點。認爲如何實現它並不重要，只要結果是一樣的。 –

我不知道，我只是沒有看到相似之處。當你在堆棧溢出中發佈一個答案...我必須更清楚，也許它必須是一個評論呢？ –

我可以通過砌體實現這種佈局嗎？

回答

相關問題