আধুনিক ব্রাউজারগুলি
আপনি যা খুঁজছেন তা সমর্থন করার জন্য 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/
এইচটিএমএল:
<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>
javascript:
(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;
});
}
