使一个元素在另一个元素内绝对居中，可以通过绝对定位和margin:auto;的方式
.center_xy{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
如何使元素内容滚动：
overflow:auto;
锚点：
<a>标签的锚点可以和id绑定，<a href="#id">跳转到锚点所在的元素，#代表当前页面
防止class名起冲突：
在命名时加上外部的class名
设置最小宽度，以便容器内容为空时可显示默认宽度，内容较多时自动扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../demo1/demo1.css" />
</head>
<body>
<div class="mainbox center_xy">
<div class="title">图片展示</div>
<hr>
</div>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/imgdata.js" ></script>
<script type="text/javascript" src="../js/demo1.js" ></script>
</body>
</html>
.center_xy{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.mainbox{
600px;
height: 400px;
border: 2px solid #888;
background: #fff;
overflow: hidden;
}
.title{
height: 35px;
color: #888;
font-size: 24px;
line-height: 35px;
text-align: center;
}
hr{
border: 1px dashed #888;
}
#bigimgbox{
390px;
height: 340px;
margin-left: 5px;
border: 1px solid #888;
background: #ccc;
float: left;
overflow: hidden;
}
#bigimgbox img{
97%;
height: 97%;
margin: 5px;
border: 1px solid #aaa;
overflow: hidden;
}
.minimgbox{
190px;
height: 340px;
margin-left: 5px;
border: 1px solid #888;
background: #ccc;
float: left;
overflow: auto;
}
.minimgbox img{
97%;
height: 30%;
margin-left: 2px;
margin-top: 3px;
border: 1px solid #aaa;
}
$(function(){
var $mainbox = $(".mainbox");
var $bigimgbox = $("<div id = 'bigimgbox'></div>");
var $minimgbox = $("<div class = 'minimgbox'></div>");
$mainbox.append($bigimgbox);
$mainbox.append($minimgbox);
$.each(imgdata, function(i,o) {
var $bigimg = $("<img src='"+o.img+"' id='"+o.name+"'>");
$bigimgbox.append($bigimg);
var $minimg = $("<a href='#"+o.name+"'><img src='"+ o.img +"'></a>");
$minimgbox.append($minimg);
});
})