Question

我正在尝试使用flexbox移植一个包含2行网格布局的投资组合网站，该工具以较小的分辨率包装到单个列，然后运行到Wordpress。布局类似于this portfolio site。

静态网站的代码如下所示

<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 查看网格布局或查找引用网站的源代码。

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}

#main {
overflow:auto;
padding-bottom: 180px; /* must be same height as the footer */
}

#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
} 

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

Answer 2

您可能必须添加css才能定义弹性框。代码应该给你一个想法。它看起来类似于你提到的例子

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

如何使用Flexbox制作2行/列Wordpress布局？

2 个答案: