1、首先打开hbuilder软件，新建一个html文件，在html里面写入html结构，在给每个子div设置一个class属性。2、接着在上方的style标签中设置这个名叫div的class的css样式，这里把文字字号放大并加入了边框，然后就可以使用margin属性设置子容器之间的间距了，margin中前面的是设置上下间距，后面的则是左右间距，最后根据自己的需要设置即可。3、来到浏览器即可看到效果，三个div的间距都是20px。以上就是cs设置div子容器之间的间距的方法。
<html><head>
<title>n个div成3列布局</title>
<style>
.main {width:600pxheight:autoborder-left:#ccc solid 1pxborder-top:#ccc solid 1pxmargin:0 auto}
.box {width:199pxheight:199pxfloat:leftborder-right:#ccc solid 1pxborder-bottom:#ccc solid 1pxbackground-
color:#f1f1f1}
.clear {clear:both}
</style>
</head>
<body>
<center>
<div class="main" style="margin:0 auto">
<div class="box">第一个DIV</div>
<div class="box">第二个DIV</div>
<div class="box">第三个DIV</div>
<div class="box">第四个DIV</div>
<div class="box">第五个DIV</div>
<div class="box">第六个DIV</div>
<div class="box">第七个DIV</div>
<div class="box">第八个DIV</div>
<div class="box">第N个DIV</div>
<div class="clear"></div>
</div>
</center>
</body>
</html>
不知道你怎么写成这样~光看上面代码就有好几出错误
首先
1.上面倒数第三行标签没写完全
2.出现两个同名字的ID名字，html里面ID是唯一的~在html同名字的ID只能出现一次。
3.#right的样式里面最后的float:right:500px谁教你这么写的，不敢乱发明创造啊
4.不算错误~算是规范问题~上面有的背景图片地址是全路径，有的是相对路径~请统一~要不全是全路径，要不全部是相对路径。代码要严谨。。
至于为什么不能一行~
请在id为middli1的样式里面加上左浮动或者右浮动~
因为left1和right1都写了浮动，样式排布的优先级别比没写middle1的样式高~要是能一行（估计left1和right1就不高兴了~为什么我贵族要和你个平民一桌子吃饭~）能明白不
