सीएसएस फ्लोट शीर्ष

Question

पर संरेखित करें सभी कोशिकाओं को संरेखित करने के लिए सबसे अच्छा तरीका (जेएस के बिना) (यानी, इस मामले में प्रति पंक्ति तीन कोशिकाएं हैं)।

एचटीएमएल

<ul id="list"> 
    <li>Line1 this is a very long line that will break the layout</li> 
    <li>Line2</li> 
    <li>Line3</li> 
    <li>Line4 this is a very long line that will break the layout</li> 
    <li>Line5</li> 
    <li>Line6</li> 
    <li>Line7 this is a very long line that will break the layout</li> 
    <li>Line8</li> 
    <li>Line9</li> 
</ul> 

सीएसएस

#list li{ 
    float: left; 
    width: 33%; 
    border: 1px #000 solid; 
} 

परिणाम

यह सब this Fiddle में देखा जा सकता है।

प्रति पंक्ति वस्तुओं की संख्या बदल सकती है (यानी, मुझे नहीं पता कि नई लाइन कहां शुरू होगी), और प्रत्येक की ऊंचाई परिवर्तनीय है (यानी, ऊंचाई को मजबूर नहीं कर सकता)।

Answer 1

आप vertical-align का उपयोग सुनिश्चित करना है कि ब्लॉक के पाठ ऊंचाई की परवाह किए बिना शीर्ष पर हमेशा से रहे हैं कर सकते हैं।

#list li { 
    display:inline-block; 
    vertical-align:top; 
} 

https://css-tricks.com/almanac/properties/v/vertical-align/

Answer 2

मुझे यकीन है कि यह तुम क्या मतलब है नहीं कर रहा हूँ, लेकिन वे गठबंधन कर रहे हैं:

#list li{ 
    float: left; 
    width: 33%; 
    border: 1px #000 solid; 
    min-height:40px; 
} 

Answer 3

अपने सीएसएस करने के लिए इस जोड़ें:

display: inline-block; 
height: 3em; /* adjust to fit largest content in any of the blocks */ 

और चौड़ाई से थोड़ा कम हो - 1px का बॉर्डर चौड़ाई में जोड़ा जाता है, इसलिए आप 100% + 6 पीएक्स के साथ समाप्त हो रहे हैं, जिसका अर्थ है कि प्रति पंक्ति केवल 2 ब्लॉक दिखाई देते हैं।

Answer 4

#list li{ 
    display:inline-block; 
    width: 30%; 
    border: 1px #000 solid; 
} 

http://jsfiddle.net/NF7UY/

मेरी समाधान

Answer 5

आप प्रत्येक नई लाइन के पहले तत्व पर clear:left; उपयोग करने की आवश्यकता है यही कारण है कि।

CSS3 के साथ आप कर सकते हैं:

#list li:nth-of-type(3n+1) { 
    clear:left; 
} 

http://reference.sitepoint.com/css/pseudoclass-nthoftype

Answer 6

फ्लेक्स बॉक्स समाधान:

#list { 
    display: flex; 
    flex-wrap: wrap; /*allows items to flow into a new row*/ 
} 
#list li { 
    width: 33%; 
    border: 1px #000 solid; 
} 

परिणामों में:

डेमो: http://jsfiddle.net/xja40zod/2/