使多个div横着排的两种方法，一种是浮动float，一种是布局display
一、使用float
元素一旦浮动，脱离文档流（不占页面空间，后面未浮动元素会上前补位。
1、代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> </head> <body> <div class="box"> <div class="child-1"></div> <div class="child-2"></div> <div class="child-3"></div> </div> </body> <style> .box { width: 800px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: skyblue; } .child-1 { width: 50px; height: 50px; background-color: green; float: left; } .child-2 { width: 50px; height: 50px; background-color: yellow; float: left; } .child-3 { width: 50px; height: 50px; background-color: red; float: left; } </style> </html>