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

问题描述：

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

答

那么请原谅我，你在你的最后comment写我的“错误”，但他们不是我的错误，我只能看到您发布的代码，并在你原来的问题有没有任何引导CSS，然后你eddited后，我注意到你有一个关闭</a>没有匹配<a>标签。

这种被动进取的介绍之后，让我们回到代码:)

有什么问题你当前的代码？目前，您在row内部创建了一个column，在该列下创建了一个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>缩略图。接下来，它遍历缩略图并在每行宽度的三分之一（class="col-md-4"）的容器中打印每个内容，并在该容器内为它缩小缩略图本身的结构。

Thnx寻求帮助 –

答

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

呵呵，你用的引导程序col-md-4类错了。

为了将您的内容转换成列如果你想4列有引导类col-md-*需要对col-md-*以总价12 的div则代码应该是这个样子。

<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>

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

相关推荐