如何连续显示多个上传的图像答案

【问题标题】：How to display multiple uploaded images in row如何连续显示多个上传的图像
【发布时间】：2017-04-23 15:27:07
【问题描述】：

我需要从文件上传图像并按行显示。我下面的代码显示一个在另一个之下的图像，而我希望它们在每行中显示为 3/4 个图像。

这是我尝试过的：

<html>
<head>
<title>Images in a Row</title>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="<?php echo base_url("assets1/css/bootstrap.css"); ?>">
</head>
<body>
 <div class="container">
        <p><?php echo $this->session->flashdata('statusMsg'); ?></p>
        <form enctype="multipart/form-data" action="" method="post">
            <div class="form-group">
                <label>Choose Files</label>
                <div id="rowimg">
                <input type="file" class="form-control" name="userFiles[]" multiple/>
                </div>
            </div>
            <div class="form-group">
                <input class="form-control" type="submit" name="fileSubmit" value="UPLOAD"/>
            </div>
        </form>
  <div class="row">
  <div class="col-md-4">
      <div class="thumbnail">
        <?php if(!empty($files)): foreach($files as $file): ?>
                <img src="<?php echo base_url('uploads/files/'.$file['file_name']); ?>" alt="" >
                <p>Uploaded On <?php echo date("j M Y",strtotime($file['created'])); ?></p><br>            
            <?php endforeach; else: ?>
            <p>Image(s) not found.....</p>
            <?php endif; ?>
                  </div>
    </div>
    </div>
  </div>
</body>
</html>

我在 StackOverflow 中研究了一些解决方案并获得了 CSS 代码，但它为我提供了相同的输出，所有图像一个在另一个之下:(

CSS 文件：bootstrap.css

#rowimg {
    white-space: nowrap;
    width: 5000px;
    height:200px;
}

Here is an image of my output

【问题讨论】：

在没有引导 css 的情况下使用引导类将是首先修复
我在此处粘贴代码时跳过了引导类链接。
你能发布从container div开始的渲染HTML代码吗？
哦，在那种情况下，我看到你有一个结束 </a> 但我没有看到任何开口 <a> - 这让我想知道浏览器是如何呈现的。
@DanPhilip 请原谅我的不便，因为我是新手，我不知道 HTML 的渲染是如何完成的。如果你能指导我，我会做的。

标签： php html css twitter-bootstrap

【解决方案1】：

请原谅我在上一个 comment 中写的“错误”，但它们不是我的错误，我只能看到你发布的代码，在你原来的问题中没有任何引导 css ，然后在你编辑之后我注意到你有一个结束 </a> 没有匹配的 <a> 标签。

经过这个被动攻击的介绍，让我们回到代码:)

您当前的代码有什么问题？ 目前您正在 row 内创建一个 column，并在该列下创建一个 thumbnail 并将其全部附加图像。这就是导致图像水平显示而不是垂直显示的原因。

应该如何解决？您需要将您的缩略图分成 X 项。对于每个块，您需要一个单独的 row，对于每个项目，您需要一个单独的 column。

你有以下：

<div class="row">
    <div class="col-md-4">
        <!-- HTML -->
    </div>
</div>

据此，我可以得出结论，您希望在每行上放置 3 个缩略图 (3 * 4 == 12)。因此，您需要将缩略图数组拆分为块，每个块上有 3 个缩略图。你可以使用array_chunk：

$thumbnails = array_chunk( $files, 3 );

现在$thumbnails 中有一个多维数组，其中每个维度都有 3 个缩略图。

接下来，您需要遍历$thumbnails 多维数组，并正确构建您的html 结构：

<?php if(!empty($files)) { 
    foreach($thumbnails as $files) { ?>
        <div class="row">
            <?php foreach($files as $file) { ?>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="<?php echo base_url('uploads/files/'.$file['file_name']); ?>" alt="" >
                        <p>Uploaded On <?php echo date("j M Y",strtotime($file['created'])); ?></p>
                    </div>
                </div>
            <?php } ?>
        </div>
    <?php } ?>
<?php } else { ?>
    <p>Image(s) not found.....</p>
<?php } ?>

以上代码的作用是遍历每个缩略图块并为缩略图创建一个包装<div class="row"></div>。接下来，它遍历缩略图并在一个 1/3 行宽 (class="col-md-4") 的容器内打印每个缩略图，并在该容器内打印缩略图本身的结构。

【讨论】：

感谢您的帮助

【解决方案2】：

您是否尝试将.thumbnail 类css 设置为display:inline-block; 或float:left;？

哦，你使用引导程序 col-md-4 类错误。

要将您的内容分成列，具有引导类 col-md-* 的 div 需要 col-md-* 总共 12 个。如果你想要 4 列，那么代码应该是这样的。

 <div class="col-md-3">
    <img>
 </div>
 <div class="col-md-3">
    <img>
 </div>
 <div class="col-md-3">
    <img>
 </div>
 <div class="col-md-3">
    <img>
 </div>

【讨论】：