32
सूची टैग के साथ ग्रिड कॉलम, मुझे हर 3 कॉलम प्रति सही क्रम में प्रदर्शित करने की आवश्यकता है, प्रत्येक अतिरिक्त HTML सूची तत्वों के लिए स्वत: चौड़ाई सक्षम है।सफारी को छोड़कर सभी ब्राउज़रों पर फ्लेक्सबॉक्स कोड काम कर रहा है। क्यूं कर?
यह मेरा उदाहरण है:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style><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>display: -webkit-flex;।
मैं इस तरह उत्पादन परिवर्तित करना चाहते हैं:
1 4 7 10
2 5 8 11
3 6 9 12
यह महत्वपूर्ण है कि मैं इस सफ़ारी ब्राउज़र के लिए काम अब तक मैं नहीं कर सकते सब पर इस समस्या को हल करने के लिए लगता है, मैं किसी भी मदद :)
उचित होगा मिलता हैटेस्ट लिंक:
http://jsfiddle.net/rafcastro77/3zd7yspg/59/