2013-05-11 9 views
7

के बजाय क्षैतिज रूप से सीएसएस कॉलम फैलाएं मुझे पूरा यकीन नहीं है कि यह संभव है (कम से कम मेरे अनुभव या गुगलिंग से नहीं), लेकिन मैं सोच रहा था कि सीएसएस कॉलम के आदेश को मजबूर करने का कोई तरीका है या नहीं।वर्टिकल

item1  item4  item7 
item2  item5  item8 
item3  item6  item9 

इस तरह ताकि उन्हें:

item1  item2  item3 
item4  item5  item6 
item7  item8  item9 

दिया एचटीएमएल इस तरह:

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    etc... 
</ul> 
बेशक

मैं एक तालिका (नहीं धन्यवाद) इस्तेमाल कर सकते हैं या तैरता उदाहरण, बजाय के लिए , लेकिन मैं सीएसएस columns संपत्ति का उपयोग करने की उम्मीद कर रहा था।

+2

स्तंभ गुणों का उपयोग नहीं हो सके, लेकिन क्या तैरता के साथ गलत क्या है? –

+1

उसने कहा, टेबल के साथ क्या गलत है? –

+0

क्योंकि मेरे उदाहरण में, यह टेबल का उपयोग करने के लिए समझ में नहीं आता है। यह एक सूची है। फ्लोट्स के साथ कुछ भी गलत नहीं, स्वाभाविक रूप से, अगर मैं सीएसएस कॉलम संपत्ति के साथ संभव था तो मैं उत्सुक था। – Jason

उत्तर

0

आप इसे दो तरीके कर सकते हैं।

या तो प्रदर्शन का उपयोग करें: इनलाइन-ब्लॉक; या प्रदर्शन का उपयोग करें: फ्लेक्स;

यहां प्रदर्शन है: इनलाइन-ब्लॉक; उदाहरण:

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t vertical-align: top; 
 
}
<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>

और यहाँ प्रदर्शन है: फ्लेक्स; उदाहरण:

नोट: फ्लेक्स कुछ हद तक IE11 में समर्थित है लेकिन पूरी तरह से एज में समर्थित है। यह सभी सदाबहारों में पूरी तरह से समर्थित है।

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t width: 33.3%; 
 
}
<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>

+0

धन्यवाद। मैं 'कॉलम' परिवार में कुछ संपत्ति की उम्मीद कर रहा था, हालांकि जब मैंने यह सवाल पूछा, तो मुझे लगता है :) – Jason

+1

हाँ, जैसा कि आपको कॉलम समाधान नहीं मिला है, लेकिन आपको दो अन्य विकल्प देना चाहते थे। – haltersweb

संबंधित मुद्दे