Question

好吧，我有一段时间没有使用WordPress，但我认为我可以做到这一点......但失败了。我要做的是列出指定父页面的所有子页面，并将它们列在2个2的漂亮小方框中。我设法获取代码列出框中的所有子页面，但我卡住了将它们列为2乘2.这是我的代码。

<?php
$args = array(
     'post_parent' => 31, 
     'post_type' => 'page',
     'posts_per_page' => 5,
     'orderby' => 'name',
     'order' => 'ASC'
     );
query_posts($args);
while (have_posts()) : the_post(); ?> 

<div id="container">    
<div id="left"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><?php the_content(); ?></div>
<div id="right"><?php the_post_thumbnail('home-post-box'); ?></div>
</div><!--//special_page_box-->     

<?php endwhile;
wp_reset_query();
} else { 
the_content();
} ?>

这段代码工作正常，但是我真的想把它们分成2乘2，第一项浮动到左边，第二项浮动到右边。而且我完全陷入困境。我玩了一些CSS技巧并设法列出了内联块，但这并没有真正帮助。那么，你们中的任何一个人可以帮助我完成项目的最后一步吗？我将不胜感激！我没有提供任何CSS，因为我没有任何设置代码，我还在试验。

谢谢！

编辑我不认为我解释得很好，对不起。这是我想要的外观照片：

Example http://kate.illstudios.com/ex.jpg

Answer 1

我认为不需要任何编码。只是一些CSS样式。对于每个帖子，你似乎有两个div，一个左边和一个右边，所以实际上你想要每行4个div。我让它采取了一些小孩的行动：

<html>
<head>
<style>
  .container {float:left; border: solid 1px black; width: 40%; }
  .container:nth-child(2n + 1){clear: left; margin-right: 10%;}
  .left { width: 50%; float: left; }
  .right { width: 50%; float: left;}
  .right img{width:90%; margin:0px auto; padding: 10px 0px;} 
</style>
</head>
<body>

while (have_posts()) : the_post(); ?> 

<div class="container">    
    <div class="left"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><?php  the_content(); ?></div>
    <div class="right"><?php the_post_thumbnail('home-post-box'); ?></div>
</div><!--//special_page_box-->

我放宽度和边框，以便更容易看到发生了什么以及元素的边界在哪里。最好通过公共类选择子div，因为此代码将选择容器下的所有div。

WordPress如何以两个为一组列出所有子页面

1 个答案: