为什么这些盒子不会对齐？

Question

我希望所有的盒子都是完美的，但是出于某种原因，从第二排起，它们开始向左倾斜。

$(document).ready(function() {
  number = 0;
document.getElementById("create").onclick = function () {
    var ok = true;
     boxHTML = document.getElementsByClassName("box")[number].innerHTML;
     if (ok === true) {
          var obj = document.createElement('div');
          obj.className = 'box';
          obj.innerHTML = boxHTML;
          $(this).before(obj);
    }
    number++;
};});

//Colours
$Background:#EAEAEA;

//Body
body{
}
//Menu
#menu {
  margin-left: 5%;
  margin-top: 5.25rem;
  position:absolute;
  ul{
    list-style-type: none;
  }
  li{
    a{
      padding: 10px 15px;
      text-decoration: none;
      display: block;
      color: black;
      font-family: "roboto", sans-serif;
      &:hover {
        text-transform: uppercase;
      }
    }
  }
}

//Dashboard
#dashboard{
  display: inline-block;
  border-radius:5px;
  border: 0.5px solid black;
  width: 73%;
    height: 35rem;
    margin-left: 17%;
    margin-right: 20%;
    margin-top: 6.8rem;
    position: absolute;
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
    box-shadow:0 0 10px rgba(0,0,0,0.8);
}


//Boxes
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * {
  box-sizing: border-box;
}
body {
  background: #e4e9f0;
  padding: 40px;
}
.box {
  float: left;
  position: relative;
  display: inline-block;
  width: 45%;
  background: white;
  padding: 30px;
  margin-right: 2%;
  margin-left: 4%;
  margin-top: 3%;
  box-shadow:  0 2px 5px rgba(0,0,0,0.1);
  border-radius: 2px;
  overflow: hidden;
  + .box {
    margin: 0px;
    margin-top: 3%;
  }
  &:after {
    padding-top: 30%;
    display: block;
    content: '';
  }
  > div {
    float: left;
    width: 100%;
    height: 150px;
    color: #fff;
  }
  header {
    background: #533687;
    display: block;
    margin: -30px -30px 30px -30px;
    padding: 10px 10px;
    h2 {
      line-height: 1;
      padding: 0;
      margin: 0;
      font-family: "roboto", sans-serif;
      font-weight: 600;
      font-size: 20px;
      color: white;
      -webkit-font-smoothing: antialiased;
    }
  }
}

#create {
  user-select:none;
  padding:20px;
  border-radius:20px;
  text-align:center;
  border:15px solid rgba(0,0,0,0.1);
  cursor:pointer;
  color:rgba(0,0,0,0.1);
  font:220px "Helvetica", sans-serif;
  line-height:185px;
  float:left;
  padding:25px 25px 40px;
  margin:0 20px 20px 0;
  width:250px;
  height:250px;
  margin-top: 3%;
}

#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard">
    <a href="#" class="box">
      <header><h2>Responsive C3</h2></header>
      <div id="chartA">
      </div>
    </a>
    <div id="create">+</div> 
  </div>

JSFiddle

Answer 1

它不适合您，因为新添加的框具有不同的margin属性。我只是为第一个框静态设置margin属性。

https://jsfiddle.net/oh0hjavL/2/