对3个div的位置进行排序

可以使用CSS的flexbox布局或者grid布局来实现。以下是两种方法的示例：

使用flexbox布局：<!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-direction: row; } .box { width: 100px; height: 100px; margin: 10px; } .box1 { background-color: red; } .box2 { background-color: green; } .box3 { background-color: blue; } </style> </head> <body> <div class="container"> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </div> </body> </html>在上述示例中，我们使用了flexbox布局，并将容器的display属性设置为flex，flex-direction属性设置为row，表示子元素水平排列。通过设置子元素的margin属性来调整它们之间的间距。
使用grid布局：<!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .box { width: 100px; height: 100px; } .box1 { background-color: red; } .box2 { background-color: green; } .box3 { background-color: blue; } </style> </head> <body> <div class="container"> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </div> </body> </html>在上述示例中，我们使用了grid布局，并通过grid-template-columns属性将容器分为3列，每列的宽度都设置为1fr，表示平均分配剩余空间。通过设置grid-gap属性来调整子元素之间的间距。

以上两种方法都可以实现对3个div的位置进行排序，具体选择哪种方法取决于实际需求和布局效果。