Question

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

这个想法是按钮将新事件添加到页面。我的问题是添加到页面的新事件没有右边的边距，因此事件与其他事件不一致。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这是由于显示：inline-block。

在这里，你可以做什么，

1）删除显示：内联块

2）添加 Float：left 而不是

3）添加 margin-left：3px; （如果你想有相同的效果）

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

注意：不要忘记在追加所有div之后添加以下行，以清除div的浮动。

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

Answer 2

删除保证金：自动;并添加像margin-right：3px;这将有效。

使用javascript创建的div未对齐

2 个答案: