एक CSS3 ग्रिड सूची 2x6 - सीएसएस, सूची, सीएसएस 3, लेआउट, ग्रिड

मैं अपनी आइटम सूची प्रदर्शित करने के लिए किसी तरह की तलाश कर रहा हूं:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>

एक लेआउट में, इस तरह से:

_________________________
| 1 | 3 | 5 | 7 | 9 | 11|
_________________________
| 2 | 4 | 6 | 8 | 10| 12|
_________________________

यह नेविगेशन / हिंडोला उद्देश्य के लिए है। जैसा कि मुझे प्रदर्शित करने के लिए 30 आइटम पसंद हैं, यह टेम्प्लेट भृकुटी पर 2 आइटम जोड़ने और बाएं से दाएं सभी आइटमों की एक चाल को प्राप्त करने के लिए अंत में 2 आइटम निकालने की अनुमति देगा।

यह एक सरल लेआउट प्रतीत होता है, हालांकि मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए, न कि आइटमों को तोड़ना सिबलिंग (निश्चित रूप से कई सूचियों की चाल होगी, लेकिन यह बदसूरत है)। आपके सहयोग के लिए धन्यवाद,

जे।

उत्तर:

आप इसका उपयोग कर सकते हैं column-count सीएसएस संपत्ति - http://jsfiddle.net/9evfz/ हालांकि यह पुराने ब्राउज़रों द्वारा समर्थित नहीं है http://caniuse.com/#search=column-count

आप सीएसएस का उपयोग कर सकते हैं column-count संपत्ति। नोट: इंटरनेट एक्सप्लोरर 9 और पुराने संस्करणों में कॉलम-काउंट संपत्ति समर्थित नहीं है।

इस सीएसएस का उपयोग करें:

ul{
-moz-column-count:6; /* Firefox */
-webkit-column-count:6; /* Safari and Chrome */
column-count:6;
}

अपने HTML के साथ:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>