归档页面双列布局异常求助：修复列高不均及排版错乱问题

我之前也踩过浮动布局导致高度不均、排版错乱的坑，给你两个实用的修改方案，帮你搞定这个问题：

方案一：用Flexbox替代浮动（推荐） #

浮动布局天生容易因为元素高度不一致出现排版错位，Flexbox是更适合这种网格布局的方案，代码改动也不大：

修改CSS： #

.ng-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* 控制列之间的间距，比padding更灵活 */
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}
.half {
  flex: 0 0 calc(50% - 12px); /* 计算后保证两列加间距刚好占满容器宽度 */
  /* 移除原来的 float: left; 和 padding-right: 24px; */
}

简化PHP代码： #

因为Flexbox会自动处理换行，你不需要再手动控制$i来包裹行元素了，代码可以更简洁：

<?php if ( have_posts() ) : ?>
<div class="ng-row">
  <?php while ( have_posts() ) : the_post(); ?>
    <div class="half">
      <?php get_template_part( 'content', get_post_format() ); ?>
    </div>
  <?php endwhile; ?>
</div>
<?php get_template_part( 'pagination' ); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

方案二：修复浮动布局（适合不想大改的情况） #

如果你坚持用浮动，需要强制让每一行的高度一致，同时修正潜在的变量初始化问题：

修改CSS： #

.half { 
  width: 50%; 
  float: left; 
  padding-right: 24px;
  box-sizing: border-box; /* 确保padding不会撑大宽度 */
  min-height: 400px; /* 根据你的内容设置一个足够大的最小高度 */
}
.ng-row { 
  border-bottom: 1px solid #eee; 
  margin-bottom: 30px; 
  overflow: hidden; /* 替代:after清除浮动的方式，更简单 */
}
/* 给偶数项移除右侧padding，避免最后一列多出间距 */
.half:nth-child(2n) {
  padding-right: 0;
}

修正PHP逻辑： #

原PHP代码里缺少$i的初始化，这会导致循环逻辑异常，补充初始化后保留原逻辑即可：

<?php $i = 0; // 必须初始化变量，否则循环逻辑可能出错 ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if($i == 0) { echo '<div class="ng-row">';} ?>
<div class="half">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php $i++; if($i == 2) {$i = 0; echo '</div>';}?>
<?php endwhile; ?>
<?php if($i > 0) {echo '</div>';}?>
<?php get_template_part( 'pagination' ); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

为什么原来的代码会出错？ #

1. 浮动元素的高度由内容决定，当某篇文章内容比另一篇长很多时，下一个浮动元素会“卡”在高度低的元素旁边，导致排版错乱；
2. 你原来的PHP代码里没有初始化$i变量，这可能导致第一次加载时循环逻辑异常。

内容的提问来源于stack exchange，提问作者Maria Anagnostou