為什么我的代碼居中不了?
? ? ?<style>
? ? ? ? ? ? *{
? ? ? ? ? ? ? ? padding:0;
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? }
? ? ? ? ? ? #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>
? ? ? ? <script>
? ? ? ? ? ? window.onload=function(){
? ? ? ? ? ? ? ? waterfall('main','box');
? ? ? ? ? ? }
? ? ? ? ? ? function waterfall(parent,box){
? ? ? ? ? ? ? ? //將main下的所有class為box的元素取出來
? ? ? ? ? ? ? ? var oParent = document.getElementById(parent);
? ? ? ? ? ? ? ? var oBoxs=getByClass(oParent,box);
? ? ? ? ? ? ? ? //計算整個頁面顯示的列數(shù)(頁面寬/box的寬度)
? ? ? ? ? ? ? ? var oBoxW=oBoxs[0].offserWidth; ? //202=165+2*10+1*2+15
? ? ? ? ? ? ? ? var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
? ? ? ? ? ? ? ? //設置main的寬、居中
? ? ? ? ? ? ? ? oParent.style.csstText='width:'+oBoxW*cols+'px;margin:0 auto';
? ? ? ? ? ? }
? ? ? ? ? ? //根據(jù)class獲取元素
? ? ? ? ? ? function getByClass(parent,clsName){
? ? ? ? ? ? ? ? var boxArr=new Array;
? ? ? ? ? ? ? ? var oElements = parent.getElementsByTagName('*');
? ? ? ? ? ? ? ? for(var i=0;i<oElements.length;i++){
? ? ? ? ? ? ? ? ? ? if(oElements[i].className==clsName){;
? ? ? ? ? ? ? ? ? ? boxArr.push(oElements[i]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return boxArr;
? ? ? ? }
? ? ? ? </script>
2022-03-24
我也遇到了這樣的問題,我是這樣解決的:可以學完之后再回過頭看看自己哪里不行,再鞏固一下,或者把你的問題說出來,我們可以幫助你的
2017-04-08
我的margin加上和不加沒啥區(qū)別
2017-03-21
如果你是下載的老師的源代碼的話,源代碼里面的magin中間多了個空格鍵,刪去就可以居中了
2017-02-19
我也是,現(xiàn)在你的問題解決了么?
這邊是有效果,但是不居中
撤掉margin:0 auto ?結果會更加偏左
但加上后,稍微向右移,但不居中
2017-02-06
??oParent.style.csstText發(fā)現(xiàn)這里剛寫錯了,但是改成?oParent.style.cssText也不能居中