我正在制作一个页面中的顶级照片部分。本节将有3篇最后的帖子(帖子中有图库),每个帖子都有缩略图、链接和摘录。立柱将以“方框样式”显示并水平对齐。这些箱子的容器宽1050px。
这是我的循环:
<div id="top-content">
<?php $custom_query = new WP_Query(\'cat=2687&posts_per_page=3\'); //Top of the page - Top Photo Category
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<ul>
<li <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(\'top-photo-thumb\'); ?><h2><?php the_title(); ?></h2></a>
<p> <?php llc_excerpt(\'llc_excerptlength_long\', \'llc_excerptmore\') ?></p>
<p class="view-more"><a href="<?php the_permalink(); ?>">View Gallery</a></p>
</li>
</ul>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>
这是我的CSS文件:#top-content{
margin-left: -10px;
}
#top-content ul{
margin: 0 4px;
float: left;
}
#top-content ul li{
width: 320px;
height: 100%;
margin: 0 5px 0 5px;
padding: 0 14px 0 0;
/*display: block;*/
border-right: 1px solid #D6D5D5;
}
#top-content h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: 12pt;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #4A65A8;
padding: 0px;
margin: 7px 0 0 0;
text-align: left;
}
#top-content ul li p{
width: 320px;
margin: 5px 0 0 0;
text-align: justify;
}
#top-content ul:last-child{
margin-left: 5px;
background-color: yellow;
border-style: 0px;
}
#top-content ul:last-child a img{
margin-left:23px;
}
#top-content ul:last-child h2{
margin-left:23px;
}
#top-content ul:last-child p{
margin-left:23px;
}
(对不起,代码太乱了。我一直在试验:P)我想在这些“框”(帖子)之间画一条CSS分隔线。第一个和第三个(最后一个)箱子应分别放置在集装箱左右边缘的右侧without 左右边界,所以我认为实现这一目标的方法是second post and then add left and right border 进入其中。
我是如何做到的,或者你有其他建议吗?(我认为可以在循环中添加自定义类)。正如你所看到的,我一直在尝试使用最后一个孩子(带有nth和那个“n”的东西)选择器,但仍然没有运气。。我不太擅长CSS(和PHP)TBH。。
提前感谢!