图片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> 

你会有一些空间，他们之间的工作正常。