html - 使用模态(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%。我放置了一个 0.5px 的 padding-right 属性来缩小 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;
}