div+css怎么分三栏

昨天在做网站模板的时候，发现一个问题，那就是div+css中的float属性只有float:left和float:right，并没有所谓的float:center或者float:middle这种用法。我想很多新手可能在这个问题上也感到困惑，比如分三栏的时候使用float:left和float:right属性的两栏显示正常，但是剩下的第三栏却跑到下面一行去了。今天就在这里把我的解决方法来跟大家分享一下。

首先，让我们来看一下分两栏的css代码，例如：

#main { width: 830px; margin: 0 auto; }
#left { float: left; display: inline; width: 300px; }
#right { float: right; display: inline; width: 500px; }

分析以上可知，在分两栏的css代码中，只需要先定义一个总的宽度“width:830px”，然后左右分栏分别用“float:left”和“float:right”属性，同时注意一下宽度的取值，两者相加略小于总宽度（用于分栏之间以及分栏与页边之间的间隙控制）就好了。

那么同理，当需要分三栏的时候，由于没有“float:center”属性，我们考虑使用2个“float:left”和一个“float:right”来实现。例如：

#main { width: 830px; margin: 0 auto; }
#left { float: left; display: inline; width: 200px; }
#right { float: right; display: inline; width: 200px; }
#middle { float: left; display: inline; width: 400px; padding-left: 15px; }

注意：在写的模板时候要注意下使用div标签的顺序，确保<div id="left">在<div id="middle">之前，否则左边栏会跑到中间而中间的会跑到左边。

其他方法实现分三栏:

也可以全部都用“float:left”来实现，不过这时在模板中的标签顺序必须严格按照左、中、右的先后顺序来（注意是模板网页代码中，而不是css文件中的顺序）。例如:

#main { width: 830px; margin: 0 auto; }
#left { float: left; display: inline; width: 200px; }
#right { float: left; display: inline; width: 200px;padding-left: 15px; }
#middle { float: left; display: inline; width: 400px; padding-left: 15px; }

如何使用div+css分三栏就向大家介绍到这里。