2010-03-09 36 views
7
ben kompleksinin bir listesini görüntülemek istediğiniz

ancak sabit boyutlu satırlı elemanları, zaman n sayfa genişliğine bağlıdır. Şunlar gibi:satırlı yayılma-davranıyor elemanları

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


Mary had 
a little 
TOO MUCH 

Bunu nasıl yapmalıyım?

cevap

13

inline-block karış bunu yapmalıdır:

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>

+0

o inline-block' IE6 çalışmıyor 'unutulmamalıdır gerçi evet ben inline-block IE6 üzerinde çalıştı farkında değildi, tahmin edebiliyorum: -) –

+0

@Andy E: Aslında, bunu yapar - ancak IE6, normalde "blok" olarak adlandırılan öğelerde değil, normalde "satır içi" varsayılan öğelere "satır içi bloğu" ayarlamanıza izin verir. Örnek için geri hatırladım, şimdi bunu düzeltdim. :-) –

+0

@ T.J. İyi bir! :-) –

5

display: block;float:left; ve istediğiniz width ile height arasındaki bir arada kullanın.

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

Şamandıralar sadece benim için çok fazla tuhaf şeyler yaparlar. :-) –

+0

@ T.J. ;-) –

+0

Sadece * zorlukla * ;-) –