Ho un div pieno di immagini:Quando viene diviso un div di immagini, è possibile trattare l'avvolgimento come una campata?
.species {
background-color: lightblue;
margin-top: 20px;
display: inline-block;
}
.animals {
display: inline;
margin: 0;
margin-right: 25px;
margin-top: 5px;
}
.animal {
width: 25px;
padding: 8px 2px 0 2px;
display: inline;
}<div class="species">
<div class="animals">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<!-- imagine about 30 more ants -->
</div>
</div>Dal momento che il mio contenuto bene è limitato a 600px, il div (.animals) contenente le formiche avvolge, in questo modo:
Ma voglio avvolgere come un <span>, per finire con l'ultimo formica, come questo (creato nel editor fotografico):
Tuttavia, se mi danno il genitore <div> un display in linea o cambiarlo in un span, il genitore non si espande al height delle immagini , in modo da ottenere questo:
quindi la mia domanda: E 'possibile ottenere il meglio di entrambi i mondi qui tra div s e span s, dove le dimensioni del contenitore per lo height delle immagini ma non si espandono allo width della pagina nell'ultima riga?
Ho provato vari comandi CSS per il wrapping di testo e spazi, senza alcun risultato.
Grazie per i tanti grandi risposte, tutti! –