HTML/CSS将div中的多个元素对齐

我想知道如何在一个div中对齐三个元素。基本上，它应该是这样的

已解决。
对于未来的读者，我的问题的解决方案如下所示

左边
居中
正确的

尝试使用

浮动：左

和

浮动：右

左和右查看此小提琴：

.container{
display:flex；//使用所有最新浏览器
display:-webkit flex；//用于旧版本的safari
显示：-ms flex；//适用于旧版本的IE
证明内容：之间的空间；
}
.货柜跨度{
弹性：1；
文本对齐：居中；
}

左边
居中
正确的

所有3个跨度应具有单独的样式。 在这里：

左边
居中
正确的

---

这应该就可以了。

请务必遵循某些规定，例如不要内联任何样式

.wrapper {
    text-align: center;
}
.left {
    float:left;
}
.center {
    margin: auto;
}
.right {
    float: right;
}


<div class="wrapper">
  <span class="left">LEFT</span>
  <span class="center">CENTER</span>
  <span class="right">RIGHT</span>  
</div>

.wrapper{
文本对齐：居中；
}
.左{
浮动：左；
}
.中心{
保证金：自动；
}
.对{
浮动：对；
}
左边
居中
正确的

有很多方法可以做到这一点。但是你可以用这样的东西

div{display:flex；align items:center；}
span:第一个子项{float:left；}
span:n子级（2）{margin:0 auto}
span:last child{float:right}

左边
居中
正确的

使用div代替span，容器元素使用以下简单CSS：

.x { 
      display: flex; 
      justify-content: space-between;
    }

display:flex

是否进行相同的分布，

调整内容：之间的空间使最外面的元素在边界处对齐


.x{
显示器：flex；
证明内容：之间的空间；
}

左边
居中
正确的
这是最好的解决方案，但由于浏览器支持，您应该添加一个后备方案。非常感谢您的迅速反应。
.x { 
      display: flex; 
      justify-content: space-between;
    }