Question

首先我很抱歉这个头衔，但我不知道如何解释这个案子。如果有人想要可以编辑它。所以我的情况就是如此，我无法弄明白如何制作它。这是HTML部分，我有两个不同的div和3列图像。问题是在第1列和第3列上有大图像。 HTML是这样的：

<div class="row"> <!-- Start Row -->
    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- First Column -->
       <div class="small-box">
              // image 800x533
       </div> 
       <div class="large-box">
              // image 860x1068
       </div>
    </div> <!-- End First Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Second Column -->
       <div class="small-box">
             // image 800x533
       </div>
       <div class="small-box">
             // image 800x533
       </div>
       <div class="small-box">
            // image 800x533
       </div>
    </div> <!-- End Second Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Third Column -->
       <div class="large-box">
            // image 860x1068
       </div>
       <div class="small-box">
            // image 800x533
       </div>
 </div>

这是我计划使用的PHP部分。从数据库加载一些图像非常简单。

 $pdo = Database::connect();

 foreach($pdo->query("SELECT * FROM images ORDER BY image_id LIMIT 7") as $row) 
 {
        // load images images
 }
 Database::disconnect();

如何在这3列中加载它们？是否有人有想法可以做到这一点？ Al图像在一个表格中。

这是Jsfiddle，我发现它看起来像画廊。熊猫的那两张图片是大盒子......其他的都是小盒子。 JSFIDDLE

Answer 1

假设一个简单的数据库表，如IMAGES [id | path | caption]。然后，检索图像将类似于：

 $images = [];
 $pdo = Database::connect();

 foreach($pdo->query("SELECT * FROM images ORDER BY image_id LIMIT 7") as $row) 
 {
        // load images images
        $images[] = [
            'path' => $row['path'],
            'caption' => $row['caption']
        ];
 }
 Database::disconnect();

接下来，您可以使用HTML并使用一些简单的函数来输出图像。首先，PHP函数创建一个图像：

function image_html($image, $size = 'small') {
  return '<img src="' . $image['path'] . '" title="' . $image['caption'] . '" class="' . $size . '"/>';
}

然后你的HTML：

<div class="row"> <!-- Start Row -->
    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- First Column -->
       <div class="small-box">
              // image 800x533
              <?php echo image_html($images[0]); ?>
       </div> 
       <div class="large-box">
              // image 860x1068
              <?php echo image_html($images[1], 'large'); ?>
       </div>
    </div> <!-- End First Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Second Column -->
       <div class="small-box">
             // image 800x533
              <?php echo image_html($images[2]); ?>
       </div>
       <div class="small-box">
             // image 800x533
              <?php echo image_html($images[3]); ?>
       </div>
       <div class="small-box">
            // image 800x533
              <?php echo image_html($images[4]); ?>
       </div>
    </div> <!-- End Second Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Third Column -->
       <div class="large-box">
            // image 860x1068
              <?php echo image_html($images[5], 'large'); ?>
       </div>
       <div class="small-box">
            // image 800x533
              <?php echo image_html($images[6]); ?>
       </div>
 </div>

以两种不同的div样式从数据库中显示一个表中的图像

1 个答案: