div布局之所以要學(xué)懂學(xué)透，是因為table的布局實在是難堪大用，如果是同處于一個表格之內(nèi)，各行的規(guī)格分布根本就沒法調(diào)，例如下面的一段非常簡單的代碼：
| <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <body> <table border="1"> <tr> <td width="5%">11111111111111</td> <td width="85%">11111111111111</td> <td width="5%">11111111111111</td> <td width="5%">11111111111111</td> </tr> <tr> <td width="5%">11111111111111</td> <td width="5%">11111111111111</td> <td width="85%">11111111111111</td> <td width="5%">11111111111111</td> </tr> </table> </body> </html> |
本想寫出這樣的布局：
但實際上出來的效果卻是這樣：
這很正常，因為table布局中僅有第一行對于td的設(shè)置是起作用的，余下行的td設(shè)置都會給第一行的td設(shè)置所覆蓋。
這個問題很嚴重，尤其是各位網(wǎng)頁設(shè)計師，把table的border屬性設(shè)置成0的情況下，很難想出發(fā)生了什么？
解決這樣的問題，如果還是用table布局，那你有兩種方法，一是讓這兩行不處于同一個表格，二是使用表格嵌套的方式。
不過這也太蛋疼了吧，每次布局都要用一個新的表格？而且腳本對這么多表格如何編號？如何控制？
所以說table的網(wǎng)頁布局不堪大用，只能用于行內(nèi)的布局，table在行內(nèi)布局的作用對于div確實強大很多。
但是div布局同樣可以完成行內(nèi)布局，只不過要定義好style中的float屬性，并且完成了一次行內(nèi)布局，要使用style中的clear:both換行。
如上的圖層排放是通過如下的代碼所實現(xiàn)的：
| <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div</title> </head> <body> <!--默認情況下的div對齊--> <div style="background:#aa0; width:15%; height:100px;"></div> <div style="background:#0a0; width:15%; height:100px;"></div> <!--更換對齊方式，必須使用clear:both換行，這個換行符的高度為10px，默認為0px，顏色同網(wǎng)頁的背景色--> <div style="clear:both; height:10px;"></div> <!--使用了行內(nèi)右對齊的方式，是先寫最右圖層，再寫次右圖層，與常人思維相反--> <div style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></div> <div style="background:#00f; width:10%; height:100px; float:right;"></div> <div style="clear:both; height:10px;"></div> <!--使用行內(nèi)左對齊方式--> <div style="background:#0f0; width:10%; height:100px; float:left;"></div> <div style="background:#F00; width:10%; height:100px; float:left;"></div> <div style="clear:both; height:10px;"></div> <div style="background:#00f; width:10%; height:100px; float:left;"></div> <!--如果你更換對齊方式，這里是希望從行內(nèi)左對齊更變成一個無論大小的圖層占用一行，而不用clear:both換行的話，這兩個圖層會疊放在一起，出錯--> <div style="background:#0af; width:15%; height:100px;"></div> <!--此乃正確的使用方式。--> <div style="clear:both; height:10px;"></div> <div style="background:#aa0; width:15%; height:100px;"></div> <div style="background:#0a0; width:15%; height:100px;"></div> </body> </html> |
