使用javascript创建的Divs未对齐

Question

I have a little list of events and a button to add events.

The idea is that the button appends new events to the page. My problem is that the new events added to the page do not have a margin to the right, so the events are not aligned with the others.

 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

This is causing due to display: inline-block.

Here, is what you can do,

1) Remove Display: inline-block

2) Add Float: left instead

3) Add margin-left: 3px; (if you want to have the same effect)

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

Note: Dont forget to add the following line after all the div's have been appended, to clear the floating of the divs.

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

Answer 2

Remove margin:auto; and add something like margin-right: 3px; that will work.