DIV CSS 佈局教程網

3、CSSDIV學習筆記

一、基本上每個區塊的div都要有自己的id，杜絕不同功能的區塊用同一個id/class

二、每個稍大的區塊div後面都跟一個標記開始、結束

三、隱藏文字的又一種方法TEXT-INDENT:-9999px;LINE-HEIGHT:0

四、巧妙地處理並列的兩列:

1)
右列為P,width=44.5%,float=left
左列為P.first,border-right:#a7a7a71pxsolid,width=45%

2)
右列#right,margin-left:50%
左列#left,float=left,width=50%border-right:#a7a7a71pxsolid

以上兩種方法關鍵點在於選擇其中一個為float=left

五、隨機的切換圖片：

#random{  
BACKGROUND:url(/rotate.PHP);  
}  
 

這個方法很巧妙。

4、關於div的高度自適應

　
　今天朋友讓我幫他的頁子解決一個問題，就是div的高度自適應，也就是在一個父級div中嵌套一左一右兩個子div，右邊的子div內容可無限擴展，而可以使得父級div的高度能被無限拉長，用一般的布局方法，在IE中可以正確浏覽，在Mozilla中父級div的高度就固定在10px左右，無法自適應高度，height:auto也不行，怎麼辦呢。網上參考到一篇資料，要實現自適應高度，div層必須具有float屬性，於是我開始動手試驗，float:left的話，div就跑到頁面最左邊去了，這好辦，我在它的外面再套一層div，把位置定好，那麼裡面的就算float:left也不會被移動位置了。

xHtml:
===============

<dividdivid=”container_father”> 
<dividdivid=”container”> 
<dividdivid=”panel”>test<br/> 
test<br/> 
test<br/> 
div> 
<dividdivid=”sidebar”> 
<ul> 
<liclassliclass=”current”>預安裝檢查li> 
<li>閱讀PFC授權協議li> 
<li>初始化數據庫li> 
<li>完成安裝li> 
ul> 
div> 
div> 
div> 
 

CSS
=================

#container_father{  
margin-left:auto;  
margin-right:auto;  
padding:0px;  
width:750px;  
}  
 
#container{  
width:750px;  
border:1pxsolid#cccccc;  
padding:8px;  
margin:0px;  
background-color:#F1F3F5;  
float:left;  
}