欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費電子書(shū)等14項超值服

開(kāi)通VIP
DIV高度自適應及應該注意的問(wèn)題

一、DIV高度自適應(父div高度隨子div的高度改變而改變)

1、如果父div不定義height、子div均為標準流的時(shí)候,父div的height隨內容的變化而變化,實(shí)現父div高度隨子div的高度改變而改變。

代碼: 

  1. <styletypestyletype="text/css"> 
  2. #aa{border:#000000solid5px}  
  3. #bb{border:#00ffffsolid5px;}  
  4. #cc{border:#0033CCsolid5px}  
  5. style> 
  6. <dividdivid="aa">父div  
  7. <dividdivid="bb">子divdiv> 
  8. <dividdivid="cc">子divdiv> 
  9. div> 

效果:IE、FF下一致

2、如果父div定義height,子div均為標準流的時(shí)候,在IE下父div的height隨內容變化而變化,ff中則固定大小,如父div設置height:50px

代碼: 

  1. <styletypestyletype="text/css"> 
  2. #aa{border:#000000solid5px;height:50px}  
  3. #bb{border:#00ffffsolid5px;}  
  4. #cc{border:#0033CCsolid5px}  
  5. style> 
  6. <dividdivid="aa">父div  
  7. <dividdivid="bb">子divdiv> 
  8. <dividdivid="cc">子divdiv> 
  9. div> 

IE效果

FF下效果

3、如果子div使用了float屬性,此時(shí)已經(jīng)脫離標準流,父div不會(huì )隨內容的高度變化而變化,解決的辦法是在浮動(dòng)的div下面,加一個(gè)空div,設置clear屬性both

未加空div代碼: 

  1. <styletypestyletype="text/css"> 
  2. #aa{border:#000000solid5px;}  
  3. #bb{border:#00ffffsolid5px;float:left}  
  4. #cc{border:#0033CCsolid5px;float:left}  
  5. style> 
  6. <dividdivid="aa">父div  
  7. <dividdivid="bb">子divdiv> 
  8. <dividdivid="cc">子divdiv> 
  9. div> 

IE效果:

FF效果:

修改后代碼: 

  1. <styletypestyletype="text/css"> 
  2. #aa{border:#000000solid5px;}  
  3. #bb{border:#00ffffsolid5px;float:left}  
  4. #cc{border:#0033CCsolid5px;float:left}  
  5. style> 
  6. <dividdivid="aa">父div  
  7. <dividdivid="bb">子divdiv> 
  8. <dividdivid="cc">子divdiv> 
  9. <divstyledivstyle="clear:both">div> 
  10. div> 

修改后效果:IEFF一致

4.另類(lèi)的DIV高度自適應
原理:
padding-bottom將列拉長(cháng)變的一樣高,而負的margin-bottom又使其回到底部開(kāi)始的位置,同時(shí),溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示
代碼: 


  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <styletypestyletype="text/css"> 
  5. #aa{border:#000000solid5px;overflow:hidden;}  
  6. #bb{border:#00ffffsolid5px;float:left;  
  7. padding-bottom:100000px;margin-bottom:-100000px;}  
  8. #cc{border:#0033CCsolid5px;float:left;  
  9. padding-bottom:100000px;margin-bottom:-100000px;}  
  10. #dd{float:left}  
  11. style> 
  12. <dividdivid="aa"> 
  13. <dividdivid="bb">子divdiv> 
  14. <dividdivid="cc">子divdiv> 
  15. <dividdivid="dd">子div<br/><br/><br/><br/><br/>div> 
  16. div> 
  17.  

效果:

本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請點(diǎn)擊舉報。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
滑出式網(wǎng)頁(yè)導航菜單
很酷的連接提示效果—— 讓你的網(wǎng)頁(yè)靚起來(lái)!
父Div的高度隨子DIV的高度自適應
CSS樣式的優(yōu)先級別
空間日記的邊框
制作透視窗格的移動(dòng)圖文圖代碼
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久