div中如何實現多列？

你們知道，在普通的HTML代碼中，咱們能夠很容易的實現多列。

好比：

 

<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></table>

 

就能夠實現一個一行2列的表格了。

 

 

可是在DIV中，實現起來就稍微有些複雜。仍是用上邊這個例子作解釋。

div中，每一對<div></div>就是一個盒子。而咱們能夠 把整個屏幕看做最外層只能擺放2個盒子的容器。要讓這兩個盒子並排放，還得分別在他們的ID對應的CSS中分別加入如下這句話：

 

float:right

float:left

 

其中left表示放在屏幕左邊，right表示放在屏幕右邊。

這其實就已經實現了兩列的表格。若是要實現多列呢？呵呵，因爲float是相對於比本身更高一級的盒子而言的。把其餘盒子放在這兩個盒子裏邊就行啦。

 

好比要實現3列的html代碼：

 

<div id="left">

      我是左邊

</div>

<div id="right">

         <div id="right_left">

                  我是右一。

         </div>

         <div id="right_right">

                   我是右二。

         </div>

</div>

 

上例的CSS代碼：

#left{float:left;width:50%;}

#right{float:right;width:50%;}

#right_left{float:left;width:49%;}

#right_right{float:right;width:49%;}

 

最後須要注意的是，若是你按照我說的作了，發現右邊的div跑到下邊去了，通常是由於這一行全部div的寬度設置的大於了行的總寬度，減少width就行了。