浮動標準佈局

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2.         "http://www.w3.org/TR/html4/loose.dtd"> 
  3.  
  4. <html> 
  5. <head> 
  6.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
  7.     <title></title> 
  8.     <style type="text/css"> 
  9.         * { 
  10.             margin: 0; 
  11.             padding: 0 
  12.         } 
  13.  
  14.             /*        #autoMarginBox{ 
  15.                 margin: 0 auto; 
  16.                 width: 400px; height: 300px; 
  17.                 border: 1px solid #8a2be2; 
  18.             } 
  19.             #absoluteBox{ 
  20.                 position: relative; 
  21.                 width: 400px; height: 300px; 
  22.                 border: 1px solid #eaeaea; 
  23.                 margin-top: -402px; 
  24.                 left:50%;margin-left: -201px; 
  25.             }*/ 
  26.         #myBox { 
  27.             width: 840px; 
  28.             border: 1px solid #ff4500; 
  29.             float: left; /*高度自適應*/ 
  30.         } 
  31.  
  32.         #div1 { 
  33.             float: left; 
  34.             border: 1px solid blue; 
  35.             width: 198px; 
  36.             height: 200px; 
  37.             margin-left: 10px; 
  38.             display: inline; /*浮動佈局空白邊相加合無素下移*/ 
  39.         } 
  40.  
  41.         #div2 { 
  42.             float: left; 
  43.             border: 1px solid blue; 
  44.             width: 198px; 
  45.             height: 200px; 
  46.             margin-left: 10px; 
  47.             display: inline; 
  48.         } 
  49.  
  50.         #div3 { 
  51.             float: left; 
  52.             border: 1px solid blue; 
  53.             width: 198px; 
  54.             height: 200px; 
  55.             margin-left: 10px; 
  56.             display: inline; 
  57.         } 
  58.  
  59.         #div4 { 
  60.             float: left; 
  61.             border: 1px solid blue; 
  62.             width: 198px; 
  63.             height: 200px; 
  64.             margin-left: 10px; 
  65.             display: inline; 
  66.         } 
  67.     </style> 
  68. </head> 
  69. <body> 
  70. <!--<div id="autoMarginBox">autoMarginCenter 
  71. </div> 
  72. <div id="absoluteBox">absoluteCenter</div>--> 
  73.  
  74. <div id="myBox"> 
  75.     <div id="div1">div1</div> 
  76.     <div id="div2">div2</div> 
  77.     <div id="div3">div3</div> 
  78.     <div id="div4">div4</div> 
  79. <!-- 清處浮動,使元素緊挨上面元素邊框,overflow:hidden--> 
  80.     <div style="clear:both;height: 0px;overflow:hidden;"></div> 
  81.     <div>div5</div> 
  82. </div> 
  83.  
  84. </body> 
  85. </html> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章