2014-09-24 2 views
1

Я пытаюсь сделать макет масонства CSS с изображениями, используя приведенный ниже код (который находится внутри цикла Еогеасп в PHP):Изображение CSS Кладка расположение

<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 

Имеет ли это смысл?

+0

, то почему вы хотите использовать кирпичную кладку? это по сравнению с макетом по определению! – Devin

ответ

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> 
1

Я не уверен, что масонство является ли правильным выбором для этого, но вы ок п достигнуть его через CSS float:left ИЛИ вы можете использовать Bootstrap Grid ИЛИ Foundation Grid ИЛИ Masonry ИЛИ этот пример JSFiddle

1

Я бы рекомендовал, используя этот CSS код и их соответствующие классы по HTML:

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> 

У вас будет некоторое пространство между ними и прекрасно работает.