多行跨度行爲元素

Question

我想顯示一個複雜但固定大小的多行元素列表，假設它們將在行結束時覆蓋頁面行，使它們在每行中出現n，當 n取決於頁面寬度。例如：

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


Mary had 
a little 
TOO MUCH 

我應該怎麼做？

Answer 1

inline-block跨度應該這樣做：

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

使用組合display: block;float:left;和您想要的width和height。

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