Question

我需要从文件上传图像并将其显示在行中。我的下面的代码一个接一个地显示图像，而我希望它们在每一行中显示为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

Answer 1

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

在这种被动攻击性介绍之后，让我们回到代码:)

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

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

您有以下内容：

<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/ class="col-md-4"）的容器内打印每个缩略图，并在该容器内部显示缩略图本身的结构。

Answer 2

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

哦，你使用bootstrap 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>

如何在行中显示多个上传的图像

2 个答案: