我需要从文件上传图像并将它们显示在行中。 我下面的代码显示的图像一个在另一个下面,而我希望它们在每行中显示为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;
}
使用没有引导CSS的引导类将是第一个要修复的东西 –
我在这里粘贴代码时跳过了引导类链接。 –
你可以发布从'container' div开始呈现的HTML代码吗? –