mehrzeilige Meßbereichsregeleinrichtung verhaltenden Elemente

Question

ich eine Liste komplexer angezeigt werden soll, aber mit fester Größe mehrzeilige Elemente, vorausgesetzt, dass sie die Seite Zeile umgebrochen werden, wenn Zeilenende erreicht ist, so dass sie durch n in jeder Zeile erscheinen, wenn n hängt von der Seitenbreite ab. Etwas wie:

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


Mary had 
a little 
TOO MUCH 

Wie soll ich das tun?

Answer 1

inline-block Spannweiten sollte es tun:

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

Verwenden Sie eine Kombination aus display: block;float:left; und Ihrem gewünschten width und height.

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