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

标签 php html css wordpress

好吧,我已经有一段时间没有使用 WordPress 了,但我认为我可以做到这一点……但失败了。我想要做的是列出指定父页面的所有子页面,并将它们在漂亮的小框中 2 x 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,第一项 float 到左侧,第二项 float 到右侧。我完全被困住了。我尝试了一些 CSS 技巧并设法获得了列出的内联 block ,但这并没有真正帮助。那么,你们中有人可以帮助我完成元素的最后一步吗?我将不胜感激!我没有提供任何 CSS,因为我没有任何设置代码,我还在试验。

谢谢!

编辑 我认为我解释得不是很好,对此感到抱歉。这是我想要的外观的图片:

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

最佳答案

我认为这里不需要任何编码。只是一些 CSS 样式。对于每个帖子,您似乎有两个 div,一个左边和一个右边,所以实际上您需要每行 4 个 div。我通过一些 nth-child 操作让它工作:

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

关于php - WordPress 如何以两个为一组列出所有子页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22108343/

相关文章:

php - 将 JS 字符串转换为 JSON 对象

javascript - JS 代码加载样式表。如何修改JS,在html中引用样式表?

html - IE 条件语句在 IE11 企业模式下不起作用

php - 使用 file_get_contents 在提取 RSS 提要而不是常规 URL 时会使内存过载?

php - 输出时间 - 日期时间条目

html - 如何使用CSS从输入文本框中删除文本

html - 菜单不适用于移动设备

html - 悬停时下拉菜单消失

css - 在 Chrome 中列出第一行的点

PHP 从字符串中获取图像的所有 URL