父div中的中心3 div

我试图将3 div放入父div而没有结果。 请问你能帮帮我吗 ？

HTML：

CSS：

 #container { text-align: center; } #left, #middle, #right { width: 200px; float: left; background: red; height: 90px; } 

结果：

Answer 1

改变float:left; display:inline-block; ， 像这样：

 #left, #middle, #right { width: 200px; display:inline-block; background: red; height: 90px; } 

Answer 2

你可以尝试这个：

 #left, #middle, #right { width: 200px; display:inline-block; background: red; height: 90px; } 

在这里演示

Answer 3

尝试显示flex。 您需要添加供应商前缀！

 #container { text-align: center; display: flex; justify-content: space-between; width: 100%; } #left, #middle, #right { width: 200px; background: red; height: 90px; } 

Answer 4

 #container { text-align: center; } #left, #middle, #right { width: 200px; margin:0px auto; height: 90px; } #left { background: red; } #middle { background:blue; } #right { background: green; } 

Answer 5

添加Bootstrap CSS并查看此示例。

这里：

• COL =列
• MD =中型设备
• 图4表示屏幕的分区，因为单行中可能的最大列是12

所以4/12 = 3个小组的结果。

 
 
left
 
middle
 
right
  

试试Bootstrap它会让你的生活变得轻松。 这里是你想要Bootstrap网格系统的Grip系统的链接。

Answer 6

删除float并添加显示inline-block

 #left, #middle, #right { width: 200px; display:inline-block; background: red; height: 90px; } 

Answer 7

为您的容器添加margin-left: auto, margin-right:auto, width: 600px 。

谢谢