用文本和照片交换列（html、css 和 php）

Posted 2023-03-05

【中文标题】用文本和照片交换列（html、css 和 php）

【英文标题】：Swap columns with text and photos (html, css and php)

【发布时间】：2022-01-13 18:01:21

【问题描述】：

我正在制作一个网站，显示照片网格，并在照片的左侧或右侧添加一些描述。我希望每次出现文本的一侧都发生变化，因此当您拥有 Photo1 时，文本位于左侧，而 Photo2 则位于右侧。现在是需要从文件夹中读取图像和文本文件的情况，所以我使用 php 来到达这里。现在是我的问题，我如何正确设置 php，使其显示我想要显示的内容？

我现在的代码（有点乱）：

<li class='row' id='fotos'>
<?php
$dirname1 = "../images/text/";
    $text = scandir($dirname1);
    $dirname = "../images/images/";
    $images = scandir($dirname);
    $ignore = array(".", "..");
    foreach($images as $curimg)
  
        if(!in_array($curimg, $curtext, $ignore)) 

    
    echo "
<div class='image'>
  <img class='img' src='".$dirname.$curimg."'>
</div>
";
        
    

?>
</li>

这是我找到的代码笔，可以交换 div：

Codepen

知道实现此目的或使我的代码工作的方法的人，已经谢谢您了！！

（感谢您的宝贵时间）

编辑：

我想要这样的东西：

    <?php
  $dirname = "images-9/images/images/";
  $dirname1 = "images-9/images/text/";
  $text = scandir($dirname1);
  $images = scandir($dirname);
  $ignore = array(".", "..");
  foreach($images as $curimg)($text as $curtext)
          if(!in_array($curimg, $curtext, $ignore)) 
      echo "
      <div class='container'>
        <div class='row'>
          <div class='col-6 order-1'>
            <img src='".$dirname.$curimg."'
          </div>
          <div class='col-6 order-2'>
            <p><iframe src='".$dirname1.$curtext."'
          </div>
        </div>
  
  ";
    
  

?>

但我知道这段代码行不通。有没有办法让它工作？

【问题讨论】：

什么究竟不能使用给定的代码？它在哪里打印除了图像以外的任何东西？

php脚本不完整，不知道怎么让php显示文字和图片。我试图编辑 foreach() 但结果一无所获。也许我需要用另一种方式编写脚本？

【参考方案1】：

使用引导程序内置的ordering，您只需在两个类名之间切换即可。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6 order-1">
      1
    </div>
    <div class="col-6 order-2">
      text
    </div>
  </div>
  <div class="row">
    <div class="col-6 order-2">
      2
    </div>
    <div class="col-6 order-1">
      text
    </div>
  </div>
  <div class="row">
    <div class="col-6 order-1">
      3
    </div>
    <div class="col-6 order-2">
      text
    </div>
  </div>
</div>