Html 如何做两个跳水动作拥抱中心跳水？

3个分区：左/中/右。我想把中心div放在浏览器中间（850px）和其他2个div（225px）拥抱它。我怎样才能做到这一点？我有一个容器，里面有三个面。有人能帮我吗

.container{

}


.left-content-area{
     width: 225px;
}

.main-content-area{
     width: 850px;
}

.right-content-area{
     width: 225px;
}

试试看

边距：自动为容器的左右两侧提供相等的边距，从而使容器在中心浮动

---

浮动：左表示div相邻浮动，而不是从新行开始。

您可以将容器设置为所有子容器的宽度，并将其居中。然后让孩子们坐在一起。在容器上使用

溢出

样式使其包含子容器（否则容器的高度为0，子容器显示在容器外部）

.container{
   width:1300px;
   margin:auto;
}

.left-content-area{
     width: 225px;
   float:left;
}

.main-content-area{
     width: 850px;
    float:left;
}

.right-content-area{
     width: 225px;
    float:left;
}

.container{
  margin: 0 auto;
  width: 1300px;
  overflow: hidden;
}


.left-content-area{
  float: left;
   width: 225px;
}

.main-content-area{
  float: left;
   width: 850px;
}

.right-content-area{
  float: left;
   width: 225px;
}