Question

我正在为我的主题开发一个自定义页面（我正在使用Foundation 4）来显示特定类别的帖子。我正在尝试将摘录放在框中（使用4列类），这也显示了帖子的缩略图。

问题是盒子在彼此下面排列（见打印屏幕的链接）：

这是代码：

<?php get_header(); ?>
<div class="row">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(''); ?>

<?php endwhile; ?>

<?php query_posts('cat=12'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row" >
<div class="large-12 columns" >
<div class="large-4 columns panel" style="float:left">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail');?> </a>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
<p class="button radius radius small"><a href="<?php the_permalink(); ?>">Ler matéria</a></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query();?>
<?php endif; ?>   
</div
<?php get_footer(); ?>

我很乐意，如果有人可以帮忙解决这个问题！非常感谢!!!

Answer 1

当您使用<div class="row">时，它将跳到下一行。如果您想在同一行中有三个项目（并且您的项目总共只有3个），那么您可以将输出设置为：

<div class="row">
<!-- Start loop -->
  <div class="large-4 columns">

  </div>
<!-- End loop which would have created 3 * the large-4 columns divs -->
</div>

如果你想要每行3个项目并且你的循环可能有任意数量的项目，那么最好使用块网格。它将被设置为：

<div class="row">
  <div class="large-12 columns">
    <ul class="large-block-grid-3>
    <!-- Start loop -->
      <li><li>
    <!-- End loop which will create however many li that you need, and place them 3 per row -->
</div>

Float：使用Foundation 4不使用WP主题

1 个答案: