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

2024-12-31 23:55:40

推荐回答（5个）

回答1：

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

将div改为行内元素
```
display:inline-block;
```
改变默认的文档流
```
float:left;
```

示例如下：

创建Html元素
```
	方式一：display:inline-block;

	
```

方式二：float:left;

设置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;          /*注意此处改变默认文档流，采用浮动的方式*/
}

观察显示效果

回答2：

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

例如：

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

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

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

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

回答3：

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

回答4：

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

回答5：

用class 同一个css就可以了