Divs mit Javascript erstellt nicht ausgerichtet

ich eine kleine Liste von Ereignissen und eine Schaltfläche Ereignisse hinzuzufügen.Divs mit Javascript erstellt nicht ausgerichtet

Die Idee ist, dass der Knopf auf der Seite neue Ereignisse anhängt. Mein Problem ist, dass die neuen Ereignisse, die der Seite hinzugefügt werden, keinen rechten Rand haben, also sind die Ereignisse nicht mit den anderen ausgerichtet.

function addEvent() { 
 
    var iDiv = document.createElement('div'); 
 
    iDiv.innerHTML = "Nome: Front In Sampa 6a edição<br>\ 
 
\t \t Data: 1/7/2017<br>\ 
 
\t \t Horário: 8:00 - 19:00<br>\ 
 
\t \t Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo<br>\ 
 
\t \t Organizadores: Front In Sampa<br>\ 
 
\t \t 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>

Quelle

2017-05-09 Victor Feitosa

Die Tatsache, dass die divs nicht von JavaScript-Zeile hinzugefügt werden, sind ein Zufall aufgrund der Leerzeichen in Ihrem Code. – j08691

Rand Auto 0; Ausrichtungsprobleme verursachen .. arbeiten mit Marge/padding – JCoding

Dies verursacht aufgrund display: inline-block.

Hier ist das, was Sie tun können,

1) Entfernen Anzeige: inline-block

2) hinzufügen float: left statt

3) In margin-left : 3px; (wenn Sie den gleichen Effekt haben wollen)

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

Hinweis: Vergessen Sie nicht, die folgende Zeile nach allen divs beigefügten wurden, hinzuzufügen, um das Aufschwimmen der divs zu löschen.

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

Quelle

2017-05-09 14:18:55 Janak

kein Fan von DIVs zu löschen. Es ist 2017 und es gibt mehr passende Lösungen als zusätzliches Markup hinzuzufügen. – hungerstar

Stimmt, aber das ist nur ein Teil der Lösung, die ich gegeben habe. Ich möchte ein neues Problem erstellen und gleichzeitig das bestehende beheben. – Janak

FWIW, würde eine clearfix mit nicht ein neues Problem geschaffen haben. Es ist in Ordnung, dass es ein Teil Ihrer Lösung ist, nur veraltet ist alles. – hungerstar

entfernen margin: auto; und füge etwas wie Rand rechts hinzu: 3px; das wird funktionieren.

Quelle

2017-05-09 14:03:47 guergana

in .Event in der CSS können – guergana

Divs mit Javascript erstellt nicht ausgerichtet

Antwort

Verwandte Themen