使用模态（CSS，html）水平对齐三个div

Question

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

html代码

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

css代码

    .modal-body{
        float:left;
        width: 100%;
    }
    .modal-body-2{
        margin-left: 100%;
        width:100%;
        padding: 15px;
    }
    .modal-body-3{
        margin-left: 200%;
        width:100%;
        padding: 15px;
    }
    #modal-wrapper{
        display: inline-block;
        width: 100%;
        margin: 0 auto;
    }

Answer 1

这是我制作的JSFiddle：http://jsfiddle.net/5m1n8p0q/1/。您将每个元素与页面的整个宽度隔开。使用 3 div 布局，您只需要宽度的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>

<强> CSS

.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;
}