我如何使一个2行/列Wordpress布局与flexx

Question

我正在尝试使用flexx将一个具有2行网格布局的投资组合网站移植到Wordpress，该网站以较小的分辨率包装为单列。布局与本作品集网站相似。

静态站点的代码如下所示

<div class="project-container">
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="img/image-1500x1080.jpg">
    </a>
  </div>
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="img/image-1500x1080.jpg">
    </a>
  </div>
</div>

我当前使用Wordpress循环的代码是这样的

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>
<?php $args=array( 'post_type'=>'work' ); $query = new WP_QUERY( $args ); ?>
<div class="project-container">
  <?php if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); ?>
  <div class="project-item">
    <h3 class="project-title"><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>">
      <?php the_post_thumbnail( ''); ?>
    </a>
  </div>
  <?php endwhile; endif; wp_reset_postdata; ?>
</div>

如何让循环显示2个不同的项目?

Answer 1

有几种方法可以做到这一点。

1)。在一个列中包装2个项目
可以通过实现计数器和检查来关闭和打开列元素。

2)。通过CSS查看网格布局或查找参考网站的源代码。

@media only screen and (min-width: 700px){
    section.projlist a:nth-child(even) {
        margin-left: 0.65em;
        margin-right: 0;
}
@media only screen and (min-width: 700px){
    section.projlist a:nth-child(even) {
        margin-left: 0.65em;
        margin-right: 0;
    }
}
@media only screen and (min-width: 700px){
    section.projlist a {
        width: calc(50% - 0.65em);
        max-width: none;
    }
}

Answer 2

您可能需要添加css来定义flex-box。代码应该给你一个概念。它看起来类似于您提到的示例

.project-container {
  display: flex;
}
.project-item {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
}
.project-item h3 {
  margin-bottom: -20px;
  z-index: 1;
}
.project-item img {}

<div class="project-container">
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="http://lorempixel.com/400/200/sports/2/">
    </a>
  </div>
  <div class="project-item">
    <h3 class="project-title">Project Title</h3>
    <a href="#">
      <img src="http://lorempixel.com/400/200/sports/3/">
    </a>
  </div>
</div>