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%; }

以後有新的再往下加下去