div 多列布局的实现方法

发布时间:2020-11-24编辑:脚本学堂
本文主要介绍如何在div中实现多列的?这种方法很不寻常,一定好好看看这篇文章。

一般普通的HTML代码中,很容易的实现多列。
比如:
 

复制代码 代码示例:
table><tr><td>1</td><td>2</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就可以。