為啥不能居中呢
<style type="text/css" media="screen">
? ? *{
? ? ? ? padding: 0px;
? ? ? ? margin:0px;
? ? }
? ? #main{
? ? ??
? ? ? ? position:relative;
? ? ?
? ? ? ??
? ? }
? ? .box{
? ? ? ? padding:15px 0 0 15px;
? ? ? ? float:left;
? ? }
? ? .pic{
? ? ? ? padding:10px;
? ? ? ? border:1px solid #ccc;
? ? ? ? border-radius: 5px;
? ? ? ? box-shadow: 0 0 5px #ccc;
? ? }
? ? .pic img{
? ? ? ? width:165px;
? ? ? ? height:auto;
? ? }
</style>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
? ? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
? ? <title>瀑布流</title>
? ? <script type="text/javascript">
window.onload=function(){
?waterfall("main","box");
}
function waterfall(parent,box){
? ? var o=document.getElementById(parent);
? ?var ubox=getbox(o,box);
?
? ?var boxw=ubox[0].offsetWidth;
? ?var lieshu=Math.floor(document.documentElement.clientWidth/boxw);
? ? //main寬度
? ?
? ? ? ??
}
function getbox(parent,clsname){
//取main每個box
? var xbox=new Array(),//用來存儲class為box的元素
? ? a=parent.getElementsByTagName('*');
? for(var i=0;i<a.length;i++){
? ? if(a[i].className==clsname) ?xbox.push(a[i]);
}
return xbox;
}
? ? </script>
</head>
<body>
? ? <div id="main">
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/1.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/2.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/3.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/4.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/5.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/6.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/7.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/8.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/9.jpeg"alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/10.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/11.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/12.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/13.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/14.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ?<div>
? ? <div>
? ? ? ? <img src="imaegs/15.jpeg" alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/16.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? <div>
? ? <div>
? ? ? ? <img src="imaegs/17.jpeg" ?alt="" />
? ? </div>
? ?</div>
? ? ? ??
? ? </div>
</body>
</html>
2016-11-25
你少一句這個：oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";這是設(shè)置夫元素的寬度和居中