html并列列,如何实现多个DIV并排一列

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

希望对你有帮助，望采纳

.box1, .box2, .box3, .box4{width:20%; height:100px; background:#666; margin:0 1% 10px}/*浮动后div之间要有间隙，我们要用内填充和外边距，不能像定位那样写数值就行了*/

.box1, .box2, .box3, .box4{float:left}/*float:left就是左浮动，浮动是非常常用的方法，左右两边的要并列div都要加这个，不能一个写，一个不写，这是不规范的*/

.box5{ width:50%; height:40px; background:#999; clear:both}/*为了避免浮动对紧跟它的下面的div有影响,box5要清除浮动，也就是clear:both*/

.big_box{position:relative}/*定位也是一种方法，先将它的父级做相对定位，如果没有这个父级而默认body为父级做绝对就比较难处理了，所以最好之前就写好*/

.box6, .box7, .box8{width:20%; height:100px; background:#CCC; position:absolute}/*position:absolute绝对定位; 至于你说的两边宽不动，中间自适应的问题你可以把box7的宽度做自动：width:auto；它位置的数值就需要你自己尝试了*/

.box6{left:0; top:0}/*添加数值，定位他们的位置，你可以尝试其他的数看看*/

.box7{left:40%; top:0}

.box8{right:0; top:0;}

box1

box2

box3

box4

box5

box6

box6

box6