图像CSS砌体布局

我正在尝试使用下面的代码（在PHP中的foreach循环中）对图像进行CSS布局：

我想知道是否有任何方法可以这样做，它有两个小的图像，然后一个大的图像下面。。范例

image     |     image

  full width image  

image     |     image

  full width image  

---

这有意义吗？

从这个问题上看，我认为砌石是不必要的，只需要两个等级

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

.halfimg{宽度：50%；浮点：左；}
.fullimg{宽度：100%；}

从这个问题来看，我认为砌石是没有必要的，只需两级即可

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

.halfimg{宽度：50%；浮点：左；}
.fullimg{宽度：100%；}

我不确定砌石是否是正确的选择，但你可以通过CSS

float:left

实现它，或者你可以使用OR或这个例子

我不确定砌石是否是正确的选择，但你可以通过CSS

float:left

实现它，或者你可以使用OR或这个例子

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

div.pagepix div.half{
宽度：48%；
浮动：左；
padding:1%；//如果不希望它们变小，请将其更改为margin
}
div.pagepix div.full{
宽度：98%；
浮动：左；
padding:1%；//如果不希望它们变小，请将其更改为margin
}

---

您将在它们之间留出一些空间，并且可以正常工作。

我建议在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>

div.pagepix div.half{
宽度：48%；
浮动：左；
padding:1%；//如果不希望它们变小，请将其更改为margin
}
div.pagepix div.full{
宽度：98%；
浮动：左；
padding:1%；//如果不希望它们变小，请将其更改为margin
}

---

它们之间会有一些空间，可以很好地工作。

那么为什么要使用砖石呢？这是反砌体布局的定义！那你为什么要用砖石呢？这是反砌体布局的定义！