可折叠div展开推挤整行元素的CSS布局对齐问题如何解决？

你当前使用inline-block实现两列卡片排列，而行内块元素会共享所在行的整体高度，第一行左侧卡片展开后，整行高度被撑高，会直接推挤整行下方的所有元素，因此第二行的右侧卡片会跟着一同下移。

方案1：CSS多列布局（改动最小，无需修改HTML结构） #

直接给父容器添加多列布局属性即可，仅需修改CSS：

/* 新增父容器样式 */
.Interview {
  column-count: 2;
  column-gap: 6%; /* 对应原两卡片间的间距比例 */
}

/* 修改card01原有样式 */
.card01{
  width: 100%; /* 替换原47%宽度 */
  height: auto;
  position: relative;
  display: block; /* 替换原inline-block */
  margin-top: 20px;
  vertical-align: top;
  min-height: 220px;
  background: rgb(255, 255, 255);
  break-inside: avoid; /* 避免单个卡片被列截断 */
}

适用场景：对卡片排序要求不高，多列布局默认会先填满左列再填充右列。

方案2：双独立列布局（兼容性好，保留左右交替的卡片排序） #

需要小幅修改PHP循环逻辑，把卡片拆分到左右两个独立列容器中，两列互不影响：

修改后的HTML/PHP代码 #

<div class="cards">
    <div class="Interview" id="Interview">
        <!-- 左列 -->
        <div class="interview-column">
        <?php 
        $index = 0;
        // 若使用数据库查询结果集，此处先重置指针，示例：mysqli_data_seek($Interview_Details, 0);
        while ($Interview_Details) { 
            if ($index % 2 == 0) { // 偶数序号卡片放左列
        ?>
            <div class="card01">
                <div class="collapsible">
                    <div class="image"><img src="<?php echo "/images/people/" . $Interview_Details['Photo']; ?>"/></div>
                    <div class="interview"><?php echo $Interview_Details['shortDesc']; ?></div>
                </div>
                <div class="content">
                    <p><?php echo $Interview_Details['LongDesc']; ?></p>
                    <div class="padding10">&nbsp;</div>
                </div>
            </div>
        <?php 
            }
            $index++;
        } 
        ?>
        </div>
        <!-- 右列 -->
        <div class="interview-column">
        <?php 
        $index = 0;
        // 再次重置数据集指针，示例：mysqli_data_seek($Interview_Details, 0);
        while ($Interview_Details) { 
            if ($index % 2 == 1) { // 奇数序号卡片放右列
        ?>
            <div class="card01">
                <div class="collapsible">
                    <div class="image"><img src="<?php echo "/images/people/" . $Interview_Details['Photo']; ?>"/></div>
                    <div class="interview"><?php echo $Interview_Details['shortDesc']; ?></div>
                </div>
                <div class="content">
                    <p><?php echo $Interview_Details['LongDesc']; ?></p>
                    <div class="padding10">&nbsp;</div>
                </div>
            </div>
        <?php 
            }
            $index++;
        } 
        ?>
        </div>
    </div>
</div>

新增配套CSS #

.Interview {
  display: flex;
  justify-content: space-between;
}
.interview-column {
  width: 47%;
}
/* 修改card01原有样式 */
.card01{
  width: 100%; /* 替换原47%宽度 */
  display: block; /* 替换原inline-block */
  /* 其余原有属性保留即可 */
}

适用场景：需要保留原有「左1、右1、左2、右2」的卡片排序，两列完全独立，左列卡片展开只会影响左列下方的卡片，不会联动右列元素。

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