複数のアップロードされた画像を行に表示する方法

ファイルから画像をアップロードし、行に表示する必要があります。下のコードは画像を上下に表示していますが、各行に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>

私はすべての画像に他の:(

CSSファイル以下のいずれかのStackOverflowの中で、いくつかの解決策を研究し、CSSコードを得たが、それは私に同じ出力を提供します：bootstrap.css

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

Here is an image of my output

出典

2017-04-23 Ron Axm

ブートストラップなしでブートストラップクラスを使用すると、CSSが最初に修正されます –

ここにコードを貼り付ける際にブートストラップクラスのリンクをスキップしました。 –

レンダリングされたHTMLコードを 'container' divからポストできますか？ –

さてあなたは、あなたの最後のcommentに書いたが、彼らは私のミスではなかったとして、私は唯一のあなたが投稿したコードを見ることができます私の「ミス」のための私を許して、そしてあなたの元の質問にいずれかがありませんでしたbootstrap cssして編集したあと、</a>に一致する<a>タグがないことが判明しました。

このパッシブ・アグレッシブ導入後、のは、あなたの現在のコードと間違っている何バックコード:)

に取得してみましょうか？現在row内に単一のcolumnを作成しています。その列の下にthumbnailという単一の画像を作成し、すべての画像を追加します。これは、画像が縦方向ではなく横方向に表示される原因です。

どのように修正する必要がありますか？サムネイルをX個のアイテムの塊に吐く必要があります。各チャンクに対して別々の行が必要であり、各項目について別途カラムが必要です。私はあなたがそれぞれの行（3 * 4 == 12）に3サムネイルのを入れたいと結論づけることができることから、

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

：

は、次のような持っています。そのため、サムネイルの配列を各チャンクに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"）内にそれぞれを印刷し、そのコンテナ内でサムネイル自体の構造を塗りつぶします。

出典

2017-04-23 17:57:41

Thnx –

.thumbnailクラスのCSSをdisplay:inline-block;またはfloat:left;に設定してみましたか？

ああ、あなたはブートストラップcol-md-4を間違って使用しています。ブートストラップクラスcol-md-*を持っているのdivは、あなたが4列にしたい場合は、コードは次のようになります12 を合計するcol-md-*ために必要な列にあなたのコンテンツを分割する

。

<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

複数のアップロードされた画像を行に表示する方法

答えて

関連する問題