使用模式（CSS、html）水平对齐三个div

我试图将三个div水平对齐，但遇到了一些问题。 我这样做是为了建立一些模态。 谢谢

html代码

<div id="modal-wrapper">
  <div class="modal-body"></div>
  <div class="modal-body-2"></div>
  <div class="modal-body-3"></div>
</div>

---

这是我制作的一个JSFIDLE:。您将每个元素的间距设置为页面的整个宽度。对于3分区布局，您只需要1/3或33%的宽度。我将

padding right

属性设置为0.5px，以减小33%和33.33…%宽度之间的差距。
HTML：

  <div class="modal-body">asdf</div>
  <div class="modal-body-2">asdf</div>
  <div class="modal-body-3">asdf</div>

  <div class="modal-body">asdf</div>
  <div class="modal-body-2">asdf</div>
  <div class="modal-body-3">asdf</div>

.modal-body{
    float:left;
    width: 33.3%;
    background: red;
}
.modal-body-2{
    display: inline-block;
    width: 33.3%;
    background: blue;
}
.modal-body-3{
    float: right;
    width: 33.3%;
    background: green;
    padding-right: 0.5px;
}