DIVCSS網(wǎng)頁布局:實現(xiàn)讓多個DIV排列時居中_Div+CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
      代碼調(diào)試框 [www.wf0088.com]

      [ 可先修改部分代碼 再運行查看效果 ]

      示例代碼 [www.wf0088.com]

      <?xml version="1.0" encoding="iso-8859-1"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
      body {text-align:center}
      #outer {
      width:60%;
      background:#ffffcc;
      margin:auto;
      text-align:center;
      }
      .inner {
      width:100px;
      height:100px;
      margin:5px;
      border:1px solid #000;
      }
      * html .inner {display:inline}/* for ie*/
      html>body #outer {display:table}/*for mozilla */
      html>body .inner {display:table;float:left}/*for mozilla */
      @media all and (min-width: 0px){/* opera 7 styles */
      html>body .inner {display:inline-block;float:none;}
      }

      </style>
      </head>
      <body>
      <!-- force quirks mode by using the xml pro-logue -->
      <div id="outer">
      <div class="inner">test</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
      <div class="inner">4</div>
      <div class="inner">5</div>
      <div class="inner">6</div>
      <div class="inner">7</div>
      <div class="inner">8</div>
      <div class="inner">9</div>
      <div class="inner">10</div>
      <div class="inner">11</div>
      <div class="inner">12</div>
      <div class="inner">13</div>
      <br style="clear:both" />
      </div>
      </body>
      </html>
      <script language="Javascript">
      var now = new Date();
      document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=" escape(document.referrer) "&rand=" now.getTime() "&cur=" escape(document.URL) "' border='0' alt='' width='0' height='0'>");
      </script>
      <noscript>
      <img src="http://p1.mb5u.com/divcss/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
      </noscript>

      來源:無憂整理//所屬分類:Div+CSS教程/更新時間:2005-11-26
      相關(guān)Div+CSS教程