时间戳

首页 > 解决方案 > 循环后关闭div

php - 循环后关闭div

问题描述

我正在构建一个页面，显示来自不同类别的帖子。

我对循环没有任何问题，帖子显示正确，但第二个类别标题“趋势故事”卡在“主要类别”部分。我似乎无法关闭该部分。我知道这听起来很疯狂，但我看不出我做错了什么或做错了什么。

网址：测试站点

.main-categories {
	width: 100%;
	max-width: 1280px;
	padding: 60px 70px 36px;
        margin-bottom:500px;
        margin-left:5em;
        margin-right:5em;
}

.main-categories ul li {
       list-style:none;
}

.trending-categories {
	width: 100%;
	max-width: 1280px;
	padding: 260px 70px 36px;
        margin-bottom:500px;
        margin-left:5em;
        margin-right:5em;
}

.trending-categories ul li {
       list-style:none;
}

.cat-row {
	width: 20%;
	float: left;
}

.cat-title {
max-width: 220px;
}

.cat-title h4 {
font-size: 22px;
font-weight: 900;
text-align:center;
color:#000;
}

.posts li:nth-child(3) {
color:#000;
font-size:20px;
font-weight:900;
}

.posts li:nth-child(7) {
color:#000;
font-size:20px;
font-weight:900;
}

.posts li:nth-child(4) {
margin-bottom:20px;
}

.posts li:nth-child(8) {
margin-bottom:20px;
}

ul.posts {
max-width:220px;
}

span.author {
color:#d6b4b1 !important;
}

.cat-label h2 {
    overflow: hidden;
    text-align: center;
}
.cat-label h2:before,
.cat-label h2:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
.cat-label h2:before {
    right: 0.5em;
    margin-left: -50%;
}
.cat-label h2:after {
    left: 0.5em;
    margin-right: -50%;
}

section.cat-label {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
}

section.cat-label h2 {
font-size:20px;
}

.cat-label-2 h2 {
    overflow: hidden;
    text-align: center;
}
.cat-label-2 h2:before,
.cat-label-2 h2:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
.cat-label-2 h2:before {
    right: 0.5em;
    margin-left: -50%;
}
.cat-label-2 h2:after {
    left: 0.5em;
    margin-right: -50%;
}

section.cat-label-2 {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
}

section.cat-label-2 h2 {
font-size:20px;
}
<?php /* Template Name: Fashion-Home */ ?>

<?php get_header(); ?>

<section class="cat-label">
    <h2>Categories</h2>
</section>
	
<section class="main-categories">
	<div class="cat-row">
		<div class="cat-title">
			<h4>Fashion</h4></div>
			
	<?php query_posts( 'category_name=fashion&posts_per_page=2' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
    	<li><?php echo get_the_date('d.m.Y'); ?></li> 
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by <span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>
</div>

<div class="cat-row">
	<div class="cat-title">
		<h4>Travel</h4></div>
	
	<?php query_posts( 'category_name=Travel&posts_per_page=2' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
			<li><?php echo get_the_date('d.m.Y'); ?></li>
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by <span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>				
</div>

<div class="cat-row">
	<div class="cat-title">
		<h4>Interior</h4></div>
	
	<?php query_posts( 'category_name=Travel&posts_per_page=2' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
			<li><?php echo get_the_date('d.m.Y'); ?></li> 
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by <span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>				
</div>

<div class="cat-row">
	<div class="cat-title">
		<h4>Work</h4></div>
	
	<?php query_posts( 'category_name=Travel&posts_per_page=2' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
			<li><?php echo get_the_date('d.m.Y'); ?></li>
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by<span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>				
</div>
</section>

<section class="cat-label-2">
    <h2>Trending Stories</h2>
</section>

<section class="trending-categories">
	<div class="cat-row">
		<div class="cat-title">
			<h4>Fashion</h4></div>
			
	<?php query_posts( 'category_name=fashion&posts_per_page=1' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
    	<li><?php echo get_the_date('d.m.Y'); ?></li> 
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by<span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>
</div>

<div class="cat-row">
	<div class="cat-title">
		<h4>Travel</h4></div>
	
	<?php query_posts( 'category_name=Travel&posts_per_page=1' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
			<li><?php echo get_the_date('d.m.Y'); ?></li>
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by<span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>				
</div>

<div class="cat-row">
	<div class="cat-title">
		<h4>Interior</h4></div>
	
	<?php query_posts( 'category_name=Travel&posts_per_page=1' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
			<li><?php echo get_the_date('d.m.Y'); ?></li> 
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by<span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>				
</div>

<div class="cat-row">
	<div class="cat-title">
		<h4>Work</h4></div>
	
	<?php query_posts( 'category_name=Travel&posts_per_page=1' ); ?>

	<ul class="posts">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			
	    <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(220,220)  ); ?></a></li>
			<li><?php echo get_the_date('d.m.Y'); ?></li>
		<li><a href='<?php the_permalink() ?>'><?php the_title(); ?></a></li>
		<li><p>by <span class="author"><?php the_author(); ?></span></p></li>
			
		
		<?php endwhile; ?>
			<?php endif; ?>
		<?php wp_reset_query(); ?>
		
	</ul>				
</div>
</section>

<?php get_footer(); ?>

截屏

标签： phphtmlcss

解决方案

你不止一次div这样打开两个s

<div class="cat-row">
    <div class="cat-title">

带有<ul>以下内容，其中包含li通过 PHP 循环加载的元素。

但后来，在结束</ul>标签之后，你只有一个 结束</div>标签，很可能应该有两个。

推荐阅读