Question

我需要将图像显示到基于WordPress的登录页面中。图片应显示为：

https://i.ibb.co/vk8MqkK/sample.png

在没有任何插件的情况下在WordPress上显示此布局的最佳方法是什么？

我想将每个图像显示为“自定义帖子类型”，并使用WP_Query将其动态加载到我的登录页面中。但是在HTML中，每个图像都有不同的类来创建这种布局-图像2和图像3封装在<div class="grid-y">

中

HTML（+基础XY网格类）

<div class="grid-container full">
  <div class="grid-x">

    <!-- Image 1 -->
    <div class="cell large-6">
      <img src="img/product-0.jpg" class="width-100 height-100" alt="">
    </div>

    <div class="cell large-6" >
      <div class="grid-y">

        <!-- Image 2 -->
        <div class="cell large-6">
          <img src="img/product-31.jpg" class="width-100 height-50" alt="">
        </div>

        <!-- Image 3 -->
        <div class="cell large-6">
          <img src="img/product-31.jpg" class="width-100 height-50" alt="">
        </div>
      </div> 
    </div>
  </div>
</div>

Answer 1

在不更改任何标记的情况下，您可以尝试执行以下操作：https://codepen.io/paka/pen/LeBbOW 将grid-x框中的单元格显示为内联块，而不显示为grid-y块内的单元格，因此将它们排列在另一个之间。使用此CSS，您可以得到布局：我添加了一些高度，宽度和颜色来替代您的图像

`.grid-x{
  position: relative ;
  height: 100px ;
  width: 205px ;
  padding: 0px ;
}

.grid-y > .cell:first-of-type{
  background: blue ;
}

.grid-y > .cell{
  background: red ;
}

.grid-x > .cell:first-of-type{
  height: 100px ;
  width: 100px ;

  background: #00ff00 ;
}

.grid-y {
  margin: 0px ;
  padding: 0px ;
}
.grid-y > .cell{
  padding: 0px ;
  margin: 0px ;
  height: 50px ;
  width: 100px ;
}

.grid-x > .cell{
  display: inline-block ;
}`

WordPress显示具有不同高度的图像的画廊

1 个答案: