Elemente zuerst in Spalten einfügen, dann in Zeilen

Question

Ich versuche, einige HTML-Elemente (Bilder) in Spalten zu setzen, und je nach Auflösung wären es 1, 2, 3 oder 4 Spalten. Zum Beispiel, wenn ich 11 Bilder hätte, würde Ich mag sie auf diese Weise (3 Spalten in diesem Fall) setzen:

1 2 3 
4 5 6 
7 8 9 
10 11 

ich einen Code haben, der die Spalten in Abhängigkeit von der Auflösung des Bildschirms erzeugt , aber es bringt die Spalten so:

1 5 9 
2 6 10 
3 7 11 
4 8 

Könnten Sie mir helfen?

#pics { 
 
    line-height: 1; 
 
    -webkit-column-count: 4; 
 
    -webkit-column-gap: 10px; 
 
    -moz-column-count: 4; 
 
    -moz-column-gap:  10px; 
 
    column-count:   4; 
 
    column-gap:   10px; 
 
} 
 
#pics img { 
 
    width: 100% !important; 
 
    height: auto !important; 
 
} 
 
@media (max-width: 800px) { 
 
    #pics { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count:   3; 
 
    } 
 
} 
 
@media (max-width: 500px) { 
 
    #pics { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count:   2; 
 
    } 
 
} 
 
@media (max-width: 300px) { 
 
    #pics { 
 
    -moz-column-count: 1; 
 
    -webkit-column-count: 1; 
 
    column-count:   1; 
 
    } 
 
}

<section id="pics"> 
 
    <img src="http://placehold.it/240x240?text=01" alt="01" width="240"> 
 
    <img src="http://placehold.it/240x240?text=02" alt="02" width="240"> 
 
    <img src="http://placehold.it/240x240?text=03" alt="03" width="240"> 
 
    <img src="http://placehold.it/240x240?text=04" alt="04" width="240"> 
 
    <img src="http://placehold.it/240x240?text=05" alt="05" width="240"> 
 
    <img src="http://placehold.it/240x240?text=06" alt="06" width="240"> 
 
    <img src="http://placehold.it/240x240?text=07" alt="07" width="240"> 
 
    <img src="http://placehold.it/240x240?text=08" alt="08" width="240"> 
 
    <img src="http://placehold.it/240x240?text=09" alt="09" width="240"> 
 
    <img src="http://placehold.it/240x240?text=10" alt="10" width="240"> 
 
    <img src="http://placehold.it/240x240?text=11" alt="11" width="240"> 
 
</section>

Answer 1

CSS zu vermeiden kämpfen Spalten angezeigt werden soll (als Spalten) vertikal.

Sie müssen entweder Floats oder Flexbox verwenden.

Lesen Sie mehr hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 

 
#pics { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-justify-content: flex-start; /* Safari */ 
 
    justify-content: flex-start; 
 
} 
 
#pics div { 
 
    width: 100%; 
 
    padding: 5px; 
 
} 
 

 
#pics div img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 

 
@media (min-width: 250px) { 
 
    #pics div { width: 49%; } 
 
} 
 

 
@media (min-width: 500px) { 
 
    #pics div { width: 32%; } 
 
}

<section id="pics"> 
 
    <div><img src="http://placehold.it/240x240?text=01" alt="01" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=02" alt="02" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=03" alt="03" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=04" alt="04" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=05" alt="05" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=06" alt="06" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=07" alt="07" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=08" alt="08" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=09" alt="09" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=10" alt="10" width="240"></div> 
 
    <div><img src="http://placehold.it/240x240?text=11" alt="11" width="240"></div> 
 
</section>

Answer 2

.wrapper { 
 
column-count:3; 
 
} 
 
.col { 
 
    width:33%; 
 
    height:50px; 
 
}

<div class="wrapper"> 
 
    <div class="col">1</div> 
 
    <div class="col">2</div> 
 
    <div class="col">3</div> 
 
    <div class="col">4</div> 
 
    <div class="col">5</div> 
 
    <div class="col">6</div> 
 
    <div class="col">7</div> 
 
    <div class="col">8</div> 
 
    <div class="col">9</div> 
 
</div>

Answer 3

Lesen Sie gründlich this answer. Es reagiert auch

Sie werden ein Mauerwerk Layout machen.

Eine weitere schnelle Alternative für Sie ist mit Twitter bootstrap gehen.

Ich glaube, Sie besser mit einem der oben genannten Lösungen gehen würde, versuchen Sie mit der Einstellung/Ausrichten divs & ... sind