第一：

多個div整齊排列在外層div中，如圖：

看到所有小的div的前后左右間隔都相等。假定已經(jīng)制作好上述單元div控件。在外層大div中循環(huán)開始創(chuàng)建它們。

for (var i=0; i < cellSum; i++) {var cell = new CellPhoto("2.jpg","影集套系"+id,interval,this.cellWidth,this.cellHeightvar divCell=cell.createNormalCell();div.appendChild(divCell);};

?上面有interval，自然能計算出cellWidth,cellHeight,設置cell的marginTop也為interval.這樣就能基本實現(xiàn)上述界面效果，但是如果很多行的話，會發(fā)現(xiàn)最下面一行會緊貼外層div的下邊界，為了美觀，我們需要最下面一行與下邊界的間距也是interval，這是本文重點需要解決的問題。

很簡單，找到小div中的最后一個，設置其marginBottom=interval,這樣的話，外層div會檢測到有元素需要更多的縱向空間，畫布就會自動增加interval的高度。用單個元素的margin便控制了最后一行的整體效果，非常方便，和WPF中WrapPanel非常相似。

?

第二：

元素定位的時候CSS文件必須添加position屬性，一般是這樣的：

#div0｛

　　position:absolute;

　　left:0px;

　　top:0px;

｝

有了left和top就可以定位一個dom，如果在此處想在有便宜，可以繼續(xù)使用margin來調(diào)整，也可以繼續(xù)使用left和top調(diào)整

?

#div0｛

　　position:absolute;

　　left:0px;

　　top:0px;

　　marginLeft:100px;

　　marginTop:100px;

｝

第二：

任何一個div居中可以這樣寫：

假設該div寬度為w，高度為h

#div1{

　　position:relative;

　　left:50%;

　　top:50%;

　　marginLeft:-w/2.0+'px';

　　marginTop:-h/2.0+'px';

}

?

轉載于:https://www.cnblogs.com/JimmyBright/p/4483798.html

總結

以上是生活随笔為你收集整理的div布局小技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。