循环后关闭div

Question

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

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

网址：test site

.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(); ?>

Screenshot

Answer 1

您不止一次打开两个div这样的

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

后跟<ul>包含加载了PHP循环的li个元素。

但是稍后，在结束</ul>代码后，您只有一个结束</div>代码，其中很可能应该是两个。