javascript - 使用 javascript 创建的 Div 未对齐

Question

我有一些事件列表和一个用于添加事件的按钮。

想法是按钮将新事件附加到页面。我的问题是添加到页面的新事件没有右侧边距，因此事件与其他事件不对齐。

function addEvent() {
  var iDiv = document.createElement('div');
  iDiv.innerHTML = "Nome: Front In Sampa 6a edição<br>\
		Data: 1/7/2017<br>\
		Horário: 8:00 - 19:00<br>\
		Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br>\
		Organizadores: Front In Sampa<br>\
		Foto: Alguma foto";
  iDiv.className = "event";
  document.getElementsByClassName('container')[0].appendChild(iDiv);
}

.container {
  width: 90%;
  background-color: #f0f0f0;
  margin: 0 auto;
}

.event {
  width: 20%;
  display: inline-block;
  min-height: 30%;
  margin: auto;
  margin-bottom: 5px;
  border: 2px black double;
  padding: 2%;
}

button {
  width: 100%;
  background-color: #4CAFA1;
  color: white;
  font-size: 16px;
}

<div class="container">
  <button type="button" id="add" onclick="addEvent()">Add New Event</button><br>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hot el do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
  <div class="event">
    Nome: Front In Sampa 6a edição<br> Data: 1/7/2017<br> Horário: 8:00 - 19:00<br> Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br> Organizadores: Front In Sampa<br> Foto: Alguma foto
  </div>
</div>

Answer 1

这是由于 display: inline-block 造成的。

这里是你可以做的，

1) 移除Display: inline-block

2) 添加 Float: left 代替

3) 添加ma​​rgin-left: 3px;(如果你想有同样的效果)

.event {
  width: 20%;
  float: left;
  min-height: 30%;
  margin-bottom: 5px;
  margin-left: 3px;
  border: 2px black double;
  padding: 2%;
}

注意:不要忘记在附加所有 div 后添加以下行，以清除 div 的 float 。

<div style="clear:both"></div>