我的图片为什么会这样
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>文件上传和下载</title>
<!-- Bootstrap -->
<link href="style/css/bootstrap.min.css" rel="stylesheet">
<link href="style/css/site.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.projects .thumbnail .caption {
height: auto;
max-width: auto;
}
.image{
margin:10px auto;
border-radius:5px;
overflow:hidden;
border:1px solid #CCC;
}
.image .caption P{
text-align: center;
}
nav{
margin-top:24px;
}
</style>
</head>
<body>
<!--导航栏-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'navbar-首页'])">慕课网</a>
</div>
<div class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="hidden-sm hidden-md">
<a href="" target="_blank"></a>
</li>
<li>
<a href="" target="_blank"></a>
</li>
</ul>
</div>
</div>
</div>
<!--导航栏结束-->
<!--巨幕-->
<div class="jumbotron masthead">
<div class="container">
<h1>文件上传下载</h1>
<h2>实现文件的上传和下载功能</h2>
<p class="masthead-button-links">
<form class="form-inline" action="index.php" method="get">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputName2" placeholder="输入搜索内容" name="key" value="">
<button class="btn btn-default" type="submit">搜索</button>
<button type="button" class="btn btn-primary btn-default" data-toggle="modal" data-target="#myModal"> 上传 </button>
</div>
</form>
</p>
</div>
</div>
<!--巨幕结束-->
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form class="form-inline" action="" method="post" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">上传图片</h4>
</div>
<div class="modal-body">
<p>选择图片：</p><input type="file" id="image" name="upload">
<br/>
<p>图片描述：</p><textarea class="form-control" cols="75" name="info" id="info"></textarea>
<br/><br/>
<p>
是否添加水印：
<select name="mark">
<option value="1">添加</option>
<option value="0">不添加</option>
</select>
</p>
<br/>
<p>
图片宽度比例：
<select name="scale">
<option value="800*600">800*600</option>
<option value="600*450">600*450</option>
<option value="400*300">400*300</option>
</select>
</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" name="submit" id="submit" onclick="show(this)">上传</button>
<button type="reset" class="btn btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<!--模态框结束-->
<div class="container projects">
<div class="projects-header page-header">
<h2>上传图片展示</h2>
<p>将上传的图片展示在页面中</p>
</div>
<div id="image_text">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-4">
<div class="image">
<a href="javascript:void(0)"><img class="img-responsive" src="upload/12.jpg"></a>
<div class="caption">
<p>
慕课网
</p>
</div>
</div>
</div>
</div>
</div>
<!--分页-->
<nav aria-label="Page navigation" style="text-align:center">
<ul class="pagination pagination-lg">
<li>
<a href="" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li>
<a href="" aria-label="Next">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</div>
<footer class="footer container">
<div class="row footer-bottom">
<ul class="list-inline text-center">
<h4><a href="class.imooc.com" target="_blank">class.imooc.com</a> | 慕课网</h4>
</ul>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="style/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="style/js/bootstrap.min.js"></script>
<script src="./library/ajax.js"></script>
<script type="text/JavaScript">
let image_text = document.getElementById('image_text');
image_text.innerHTML='<div class="text-center"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i> 加载中</div>';
$.get('response.php',{},function(res) {
let cons='';
if(res.code==1){
//请求成功
res.rows.forEach(function(item) {
let con = '<div class="row">'+
'<div class="col-sm-6 col-md-3 col-lg-4">'+
'<div class="image">'+
'<a href="javascript:void(0)"><img class="img-responsive" src="upload/12.jpg"></a>'+
'<div class="caption">'+
'<p>'+
'慕课网'+
'</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
cons += con;
})
image_text.innerHTML=cons;
}
},'json');
function show(){
if(document.getElementById("image").value == ''){
alert('请选择图片');
}
if(document.getElementById("info").value == ''){
alert('请输入图片描述');
}
}
</script>
</body>
</html>
我想实现这样的效果
应该怎么设置样式
正在回答 回答被采纳积分+1
同学你好，1. 因是根据父div（row）找到子div设置的样式。如果有多个row就会出现一张图片独占一行的样式布局。所以在这个页面中出现一个父div即可。
2. 同学出现分页上浮情况是因为，同学的内容为展示在父div中。id="image_text"修改到class="row"的div中。将代码如下：
<div class="row" id="image_text"> <div class="col-sm-6 col-md-3 col-lg-4"> <div class="image"> <a href="javascript:void(0)"><img class="img-responsive" src="upload/12.jpg"></a> <div class="caption"> <p> 慕课网 </p> </div> </div> </div> </div>
3. 样式高度不一致的可能是样式导致。
祝学习愉快！
同学你好，在js文件中去除带row属性值的div即可。代码如下：
let image_text = document.getElementById('image_text');
image_text.innerHTML='<div class="text-center"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i> 加载中</div>';
$.get('response.php',{},function(res) {
let cons='';
if(res.code==1){
//请求成功
res.rows.forEach(function(item) {
let con = '<div class="col-sm-6 col-md-3 col-lg-4">'+
'<div class="image">'+
'<a href="javascript:void(0)"><img class="img-responsive" src="upload/12.png"></a>'+
'<div class="caption">'+
'<p>'+
'慕课网'+
'</p>'+
'</div>'+
'</div>'+
'</div>';
cons += con;
})
image_text.innerHTML=cons;
}
},'json');祝学习愉快！
<?php
//请求数据库，响应对应页码的数据
$data = [];
sleep(3);
try{
$pdo = new PDO('mysql:host=localhost;dbname=imooc;','root','root',
[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
$sql = "select name,pic from ajax_hw limit ?,?";
$stmt = $pdo->prepare($sql);
$stmt->bindValue(1,0,PDO::PARAM_INT);
$stmt->bindValue(2,6,PDO::PARAM_INT);
$stmt->execute();
$results = $stmt->fetchALL(PDO::FETCH_ASSOC);
//echo "<pre>";
//var_dump($results);
$data = [
'code' => 1,
'msg' => 'ok',
'rows' => $results
];
}catch(PDOException $e){
$data = [
'code' => 0,
'msg' => $e->getMessage(),
'rows' => []
];
}
header('Content-type:application/json');
echo json_encode($data);
- 参与学习 人
- 提交作业 225 份
- 解答问题 3372 个
掌握用PHP开发互联网网站的必备功能，掌握当下主流的Linux系统开发，并熟练使用热门框架ThinkPhp开发电商团购项目，是通向PHP工程师必经之路。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星