Question

用纯CSS怎么让3个或更多的DIV处于同一行？

Answer 1

div是块状元素，按照默认文档流占一行，所以为了使多个DIV处于同一行，可以用两种方式：

• 将div改为行内元素

  display:inline-block;

• 改变默认的文档流
  

  float:left;

示例如下：

1. 创建Html元素

   <div class="test test1">
   	方式一：display:inline-block;<br>
   	<div></div><div></div><div></div>
   </div>
   <div class="test test2">
   	方式二：float:left;<br>
   	<div></div><div></div><div></div>
   </div>	

2. 设置css样式

   div.test{width:400px;height:100px;margin:10px;border:4px solid #ebbccb;}
   div.test1 div{
   	width:100px;height:50px;
   	border:2px solid #ccc;
   	margin:10px;
   	display:inline-block; /*注意此处采用行内元素的方式*/
   }
   div.test2 div{
   	width:100px;height:50px;
   	border:2px solid #ccc;
   	margin:10px;
   	float:left;          /*注意此处改变默认文档流，采用浮动的方式*/
   }

3. 观察显示效果

   
   

   

Answer 2

可以利用float属性实现多个div处于统一行。

例如：

div{
width:30px;
height： 30px;
float：left;
}

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

还可以利用display：inline；将div强制转换为内联元素也可实现多个div处于同一行。

Answer 3

设置最外层的宽度 比如 width：800px然后设置你要并列显示3个的DIV 的浮动 和 宽度 比如 float：left width：200px

Answer 4

宽度够的话，一个左浮动动，一个右浮动，一个不浮动就行了

Answer 5

用class 同一个css就可以了