一劃的烘焙雞 - 留言版 - CSS 應用技巧

1. 將依比例設定的 div 區塊置中

   margin-left: auto;
   margin-right: auto;

2. 在設置完區塊 float 之後，後面的排版亂掉 在 css 裡加入以下兩行，然後在 html 文件在設置完 float 的區塊後加上 <p class="clear"></p>

   .clear {zoom:1; clear:both;}
   .clear:after {content:''; display:block; clear:both; visibility:hidden; height:0;}

3. 區塊並排，並非一定要用 float，可設 display: inline-block 來完成。

4. <table> 改用 <div> for example html:

   <div id="data_grid">
          <div id="subtitle">
              <span class="st_date">日期</span>
              <span class="st_subject">標題</span>
              <span class="st_poster">發文者</span>
              <span class="st_number">篇數</span>
              <span class="st_view">查閱數</span>
          </div>
          <div class="article_list">
              <span class="st_date">2010-09-05</span>
              <span class="st_subject">Fedora 13 筆記 (Virtual Box)</span>
              <span class="st_poster">一劃</span>
              <span class="st_number">3</span>
              <span class="st_view">266</span>
          </div>
   </div>

   css:

   
   #data_grid {
   font-weight: normal;
   display: table;
   font-size: 14px;
   margin: 0px;
   padding: 0px;
   width: 100%;
   border-left: solid 1px #BB8800;
   border-top: solid 1px #BB8800;
   }
   #subtitle {
   display: table-row;
   background-color: #BB8800;
   color: #FFFFFF;
   margin: 0px;
   padding: 0px;
   }

.article_list { display: table-row; background-color: #ffffff; color: #000000; margin: 0px; padding: 0px; }

.st_date { display: table-cell; border-right: solid 1px #BB8800; border-bottom: solid 1px #BB8800; margin: 0px; padding: 3px; width: 15%; } .st_subject { display: table-cell; border-right: solid 1px #BB8800; border-bottom: solid 1px #BB8800; margin: 0px; padding: 3px; width: 50%; } .st_poster { display: table-cell; border-right: solid 1px #BB8800; border-bottom: solid 1px #BB8800; margin: 0px; padding: 3px; width: 15%; } .st_number { display: table-cell; border-right: solid 1px #BB8800; border-bottom: solid 1px #BB8800; margin: 0px; padding: 3px; width: 10%; } .st_view { display: table-cell; border-right: solid 1px #BB8800; border-bottom: solid 1px #BB8800; margin: 0px; padding: 3px; width: 20%; }

以後有新的再往下加下去