आधुनिक ब्राउज़र
आप जो खोज रहे हैं उसका समर्थन करने के लिए css3 कॉलम मॉड्यूल का लाभ उठाएं।
http://www.w3schools.com/cssref/css3_pr_columns.asp
सीएसएस:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
http://jsfiddle.net/HP85j/8/
लिगेसी ब्राउजर
आईई समर्थन के लिए दुर्भाग्य से आपको एक कोड समाधान की आवश्यकता होगी जिसमें जावास्क्रिप्ट और डोम हेरफेर शामिल है। इसका मतलब यह है कि कभी भी सूची की सामग्री में परिवर्तन करने के लिए आपको सूची को फिर से कॉलम और रिप्रिंटिंग के लिए ऑपरेशन करने की आवश्यकता होगी। नीचे दिए गए समाधान संक्षिप्तता के लिए jQuery का उपयोग करता है।
http://jsfiddle.net/HP85j/19/
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
जावास्क्रिप्ट:
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
सीएसएस:
.columns{
float: left;
position: relative;
margin-right: 20px;
}
संपादित करें:
जैसा कि नीचे बताया गया है कि कॉलम इस प्रकार होगा:
A E
B F
C G
D
जबकि ओपी ने निम्नलिखित प्रकार के मिलान के लिए कहा:
A B
C D
E F
G
वेरिएंट को पूरा करने के लिए आप कोड को निम्नलिखित में बदलें:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
