圖片CSS佈局牆面

Question

我試圖做一個CSS砌體佈局，使用下面的代碼圖像（這是在PHP foreach循環內）：

<div class="pagepix"> 
    <img alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg"> 
    <img alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg"> 
    <img alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg"> 
</div> 

而CSS是：

.pagepix{line-height:0;-webkit-column-count:2;-webkit-column-gap:0;-moz-column-count:2;-moz-column-gap:0;column-count:2;column-gap:0} 
.pagepix img{width:100%;height:auto} 

我想知道是否有做它，所以它有兩個小圖像，然後一個大圖像下方的任何方式..例如

image  |  image 

    full width image 

image  |  image 

    full width image 

是否有意義？

Answer 1

從這個問題我覺得磚石沒有必要只是讓二級

.halfimg{ width:50%; float:left;} 

.fullimg{ width:100%;} 

<div class="pagepix"> 
    <img class="halfimg" alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg"> 
    <img class="halfimg" alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg"> 
    <img class="fullimg" alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg"> 
</div> 

Answer 2

我不知道砌體是否是這個正確的選擇，但你CAñ實現它通過CSS float:left或者您可以使用Bootstrap Grid OR Foundation Grid或Masonry OR這個例子JSFiddle

Answer 3

我會建議使用的HTML這個CSS代碼及其各自的類別：

div.pagepix div.half{ 
    width:48%; 
    float:left; 
    padding: 1%; // Change this to margin if you don't want them to be smaller 
} 

div.pagepix div.full{ 
    width:98%; 
    float: left; 
    padding: 1%; // Change this to margin if you don't want them to be smaller 
} 

<div class="pagepix"> 
    <img class="half" alt="Testing 02" src="/images/thumbnail/image__xeKPEyHYPAnxsnKCWMKQ_1411534017.jpg"> 
    <img class="half" alt="Testing 01" src="/images/thumbnail/image__uVfmzTwGzakmClDShyDA_1411533981.jpg"> 
    <img class="full" alt="Testing 05" src="/images/thumbnail/image__WmLHwllUknhfDjocHqxn_1411533993.jpg"> 
</div> 

你會有一些空間，他們之間的工作正常。