बहुपंक्ति अवधि-व्यवहार तत्वों

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; 
}