如何在行中顯示多個上傳的圖像

我需要從文件上傳圖像並將它們顯示在行中。我下面的代碼顯示的圖像一個在另一個下面，而我希望它們在每行中顯示爲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

來源

2017-04-23 Ron Axm

使用沒有引導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"）的容器中打印每個內容，並在該容器內爲它縮小縮略圖本身的結構。

來源

2017-04-23 17:57:41

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>

來源

2017-04-23 16:41:27

如何在行中顯示多個上傳的圖像

回答

相關問題