我有一些事件列表和一个用于添加事件的按钮。
想法是按钮将新事件附加到页面。我的问题是添加到页面的新事件没有右侧边距,因此事件与其他事件不对齐。
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>
最佳答案
这是由于 display: inline-block 造成的。
这里是你可以做的,
1) 移除Display: inline-block
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 的 float 。
<div style="clear:both"></div>
关于javascript - 使用 javascript 创建的 Div 未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43871931/