jQuery Bild loading Problem

Question

Ich versuche herauszufinden, wie Sie verhindern, dass Boxen auf neuen Zeilen auf das erste Element einrücken.

Als Test, ich bin Codierung nur schwer, die Kisten in html wie so:

<ul id="box_container"> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
</ul> 

CSS:

#box_container { 
    height: auto; 
    width: 100%; 
} 

.box { 
    height: 300px; 
    width: 23.5%; 
    display: block; 
    background: black; 
    float: left; 
} 

.box + .box { 
    margin-left: 2%; 
} 

Die margin-left in der .box + .box arbeitet wie ich möchte, aber wie verhindere ich, dass der Rand hinzugefügt wird, wenn das nächste Element auf eine andere Linie gezwungen wird?

Ich weiß für eine Tatsache, dass ich nur vier Kästchen pro Zeile anzeigen werde, wenn das einen Unterschied macht. Ich hatte gehofft, einen Weg zu finden, dies zu tun, ohne die Box-Elemente in irgendeine Art von div alle 4 Elemente zu wickeln, aber wenn das der einzige Weg ist, dann nehme ich an, dass ich keine Wahl habe.

Hier ist ein Bild von dem, was geschieht zur Zeit Sie alle eine bessere Vorstellung zu geben:

Answer 1

Use-Marge rechts statt margin-left

.box { 
     height: 300px; 
     width: 22.5%; 
     display: block; 
     background: black; 
     float: left; 
     margin-right: 2%; 
     margin-bottom: 2%; 
    } 

    .box + .box { 
     margin-right: 2%; 
    } 

Oder in Echtgrundbegriffe, können Sie diese verwenden:

.box:nth-child(5) { 
    margin-left: 0%; 
} 

Aber dieser Code ist nicht optimal ...

Als Bhuwan sagte, verwenden Sie diesen anstelle des oben angegebenen statischen Werts, wenn Sie nicht wissen, wie viele Eingaben Sie so erhalten könnten:

.box:nth-child(4n+1) { 
    margin-left: 0%; 
} 

margin-right Codepen Link:https://codepen.io/anon/pen/JMEvmE

margin-left codepen Link:https://codepen.io/anon/pen/LexmaL

Answer 2

Sie dieses stattdessen einen Rand links von jedem Element des Hinzufügens

<ul id="box_container"> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
    <li class="box"></li> 
</ul> 

    #box_container { 
     height: auto; 
     width: 100%; 
    } 

    .box { 
     height: 300px; 
     width: 22.5%; 
     display: block; 
     background: black; 
     float: left; 
     margin-bottom: 2%; 
    } 

    .box + .box { 
     margin-right: 2%; 
    } 

Answer 3

tun können, hinzufügen die Hälfte der Rand auf jeder Seite (entfernen der .box + .box Selektor vollständig):

.box { 
    height: 300px; 
    width: 23.5%; 
    display: block; 
    background: black; 
    float: left; 
    /* ADD HALF MARGIN ON EACH SIDE OF THE BOX */ 
    margin: 0 1%; 
} 

Sie haben nun eine vertikale Ausrichtung, jedoch mit einer zusätzlichen 1% auf jeder Seite des Behälters. Um dies zu beheben, ziehen Sie den Behälter um 1% auf der linken Seite wieder heraus und rechts:

#box_container { 
    height: auto; 
    width: 100%; 
    /* PULL THE SIDES OUT BY 1% TO NEGATE BOX MARGINS */ 
    margin: 0 -1%; 
} 

Dies sollte erreicht werden, was Sie versuchen, zu tun, ohne dass eine bestimmte Anzahl von Kartons pro Zeile zielen.

Answer 4

Sie können nth-child CSS Pseudo-Selektor versuchen, die margin-left zu entfernen.

.box:nth-child(4n+1) { 
    margin-left: 0; 
} 

#box_container { 
 
    height: auto; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.box { 
 
    height: 100px; 
 
    width: 23.5%; 
 
    display: block; 
 
    background: black; 
 
    float: left; 
 
    margin-bottom: 2%; 
 
} 
 

 
.box+.box { 
 
    margin-left: 2%; 
 
} 
 

 
.box:nth-child(4n+1) { 
 
    margin-left: 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<ul id="box_container"> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
    <li class="box"></li> 
 
</ul>