如何用PHP生成text-left、text-right类交替的div序列？

嘿，我来给你几个实用的PHP实现方案，帮你生成这种交替text-left/text-right类的div序列，完全匹配你给出的示例结构：

方案1：遍历动态内容（数组/数据库结果） #

这是最常用的场景，比如你有一组图片或文章数据，需要逐个生成交替布局的div：

<?php
// 示例：从数组获取图片路径（实际可以是数据库查询结果）
$postImages = [
    'images/post1.png',
    'images/post2.png',
    'images/post3.png',
    'images/post4.png'
];

foreach ($postImages as $index => $imgSrc) {
    // 根据索引奇偶性切换类名：偶数索引用text-left，奇数用text-right
    $alignClass = $index % 2 === 0 ? 'text-left' : 'text-right';
?>
<div class="blog-post <?php echo $alignClass; ?>">
    <figure class="post-image">
        <img src="<?php echo $imgSrc; ?>" alt="Blog post image">
    </figure>
</div>
<?php
}
?>

逻辑说明 #

• 利用$index % 2的结果（0或1）来判断当前项的对齐类，实现天然的交替效果
• 索引从0开始，所以第一个div是text-left，第二个是text-right，以此循环
• 如果想让第一个是text-right，只需要把判断条件改成$index % 2 === 1 ? 'text-left' : 'text-right'即可

方案2：固定数量的静态循环 #

如果只是需要生成固定数量的交替div（不需要动态内容），可以用for循环：

<?php
$totalDivs = 5; // 要生成的div总数
for ($i = 0; $i < $totalDivs; $i++) {
    $alignClass = $i % 2 === 0 ? 'text-left' : 'text-right';
?>
<div class="blog-post <?php echo $alignClass; ?>">
    <figure class="post-image">
        <img src="images/image.png" alt="Image">
    </figure>
</div>
<?php
}
?>

方案3：适配数据库查询结果（PDO示例） #

如果你的内容来自数据库（比如博客文章列表），可以结合循环和索引变量实现：

<?php
// 假设已经通过PDO连接数据库并查询到结果
$dbQuery = $pdo->query("SELECT image_url FROM blog_posts ORDER BY created_at DESC");
$itemIndex = 0;

while ($post = $dbQuery->fetch(PDO::FETCH_ASSOC)) {
    $alignClass = $itemIndex % 2 === 0 ? 'text-left' : 'text-right';
?>
<div class="blog-post <?php echo $alignClass; ?>">
    <figure class="post-image">
        <img src="<?php echo $post['image_url']; ?>" alt="Blog post image">
    </figure>
</div>
<?php
    $itemIndex++;
}
?>

这些方案都很灵活，你可以根据自己的实际场景选择最合适的写法，核心都是通过奇偶判断来切换对齐类，实现交替布局的效果。

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