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就行了。