Elementi di comportamento di spaziatura multilinea

Question

Desidero visualizzare un elenco di elementi multilinea complessi ma fissi, presupponendo che avvolgeranno la riga della pagina quando viene raggiunta la fine della linea, facendoli apparire da n in ogni riga, quando n dipende dalla larghezza della pagina. Qualcosa di simile:

Mary had Mary had Mary had 
a little a little a little 
LAMB  LAMP  WHISKEY 


Mary had 
a little 
TOO MUCH 

Come devo fare?

Answer 1

inline-block campate dovrebbero farlo:

body { 
 
    font-family: sans-serif; 
 
} 
 
#container span { 
 
    display: inline-block; 
 
    width: 5em; 
 
    border: 1px solid black; 
 
}

<div id='container'> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
    <span>Mary had a little lamb</span> 
 
</div> 
 
</body> 
 

 
</html>

Answer 2

Utilizzare una combinazione di display: block;float:left; e il numero desiderato width e height.

span { 
    display: block; 
    float: left; 
    height: 100px; 
    width: 100px; 
}