কলামে তালিকাগুলি মোড়ানো

I'm using ColdFusion to populate a template that includes HTML lists (

    's).

    এর মধ্যে বেশিরভাগই লম্বা নয়, তবে কয়েকটি হতাশাজনক লম্বা লম্বা এবং সত্যিই 2-3 টি কলামে থাকতে পারে।

    এটি কি সহজে করার জন্য এইচটিএমএল </কোড>, কলফ ফিউশন </কোড> বা সম্ভবত <�কোড> জাভাস্ক্রিপ্ট </কোড> (আমি jQuery 'আছে) আছে? কিছু স্ক্রোলিং সংরক্ষণ করার জন্য এটা কিছু জটিল জটিল ওজন সমাধান নয়।

0
ro fr hi
এই jQuery প্লাগইন আপনি কোন ব্যবহার?
যোগ লেখক Quog, উৎস
কলামিটার jQuery প্লাগইনটি দেখুন।
যোগ লেখক phatmann, উৎস

10 উত্তর

There is no pure CSS/HTML way to achieve this, as far as I know. Your best bet would be to do it in pre-processing (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

অন্য বিকল্পটি, জাভাস্ক্রিপ্ট ব্যবহার করে (আমি jQuery লাইব্রেরির সাথে পরিচিত নই) বিশেষ করে তালিকাগুলির মাধ্যমে পুনরাবৃত্তি করতে হবে, সম্ভবত তাদের উপর ভিত্তি করে একটি নির্দিষ্ট বর্গ, শিশুদের সংখ্যা গণনা করা, এবং যদি এটি একটি উচ্চ যথেষ্ট সংখ্যা, গতিশীলভাবে প্রথমবারের পরে একটি নতুন তালিকা তৈরি, তালিকার কিছু নম্বর হস্তান্তর নতুন তালিকা যতক্ষণ কলামগুলি প্রয়োগ করা হচ্ছে, আপনি সম্ভবত তাদের বামে ভাসতে পারেন, একটি উপাদান অনুসরণ করুন যা শৈলী স্পষ্ট: বাম </কোড> বা স্পষ্ট: উভয়

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}

  • Item 1
  • Item 2
  • <!-- ... -->
  • Item 49
  • Item 50

  • Item 51
  • Item 52
  • <!-- ... -->
  • Item 99
  • Item 100
<div class="clear">
</div> </div>

0
যোগ

তাই আমি একটি তালিকা ছাড়াও এই নিবন্ধটি আপ খসড়া CSS স্বগ: মাল্টি কলাম তালিকা । আমি প্রথম সমাধান ব্যবহার করে শেষ করেছি, এটি সেরা নয় কিন্তু অন্যগুলি জটিল এইচটিএমএল ব্যবহার করে যা গতিশীলভাবে তৈরি করা যাবে না বা কাস্টম ক্লাস তৈরি করতে পারে না, যা করা যেতে পারে কিন্তু ইন-লাইন স্টাইলের লোড প্রয়োজন এবং সম্ভবত একটি বিশাল পাতা।

অন্যান্য সমাধান এখনও যদিও স্বাগত জানাই।

0
যোগ
এটা দুঃখজনক যে, দু-বছর পরে এই কাজ করার কোন পরিষ্কার উপায় নেই। ধন্যবাদ IE
যোগ লেখক Keyo, উৎস
+1 আমি পরিষ্কার পদ্ধতি পদ্ধতি খুঁজে পাই - এটি কোন মার্কআপ এবং খুব সামান্য সিএসএস ব্যবহার করার জন্য সামঞ্জস্য করা যায়।
যোগ লেখক entonio, উৎস
খুব উপকারী. ধন্যবাদ
যোগ লেখক mr.soroush, উৎস

যদি Safari এবং Firefox সমর্থন আপনার জন্য যথেষ্ট হয়, তবে একটি সিএসএস সমাধান আছে:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

আমি অপেরা সম্পর্কে নিশ্চিত নই।

0
যোগ
আমি এই সমাধানে আছি, কিন্তু আমি তালিকা বুলেট হারিয়ে ফেলছি ... এমনকি তাদের রিসেট করা বা কোনও চিত্র চেষ্টা করা কাজ করে না। কেহ?
যোগ লেখক Stefano, উৎস
97.8% ব্রাউজার সমর্থন এখন CSS এখানে কলাম অপশন সম্পর্কে আরও দেখুন
যোগ লেখক Nesha Zoric, উৎস

Flexbox উভয় সারি এবং কলাম নির্দেশাবলী আইটেম মোড়ানো ব্যবহার করা যেতে পারে।

মূল ধারণাটি হল ফ্লেক্স-ডাইরেক্টরি সারি </কোড> বা কলাম থেকে ধারকটি সেট করা।

NB: আজকাল ব্রাউজার সমর্থন বেশ ভাল।

FIDDLE

(নমুনা মার্কআপ এই পৃথক 'তালিকার পৃথক্' নিবন্ধটি থেকে নেওয়া)

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}

items in column direction

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal



items in row direction
  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal
</div> </div>

0
যোগ

যেহেতু আমি একই সমস্যা ছিলাম এবং কিছু কিছু খুঁজে পাইনি "পরিষ্কার" আমি ভাবলাম আমি আমার সমাধান পোস্ট করবো। এই উদাহরণে আমি একটি বিপরীত <�কোড> ব্যবহার করে লুপ ব্যবহার করি তাই আমি স্ক্লাইস এর পরিবর্তে ব্যাস্ত ব্যবহার করতে পারি। এখন সুবিধা হল() শুধুমাত্র একটি সূচক এবং একটি পরিসরের প্রয়োজন যেখানে স্লাইস() একটি সূচক এবং মোট প্রয়োজন লোপিংয়ের সময় পরেরটি কঠিন হয়ে যায়।

নিষ্ক্রিয়করণের সময় আমি স্ট্যাকটি উল্টাতে হবে।

উদাহরণ:

কোলস = 4; liCount = 35

জন্য স্লাইস সঙ্গে লুপ জন্য = [0, 9]; [9, 18]; [18, ২7]; [২7, 35]

splice = সঙ্গে যখন বিপরীত [27, 8]; [18, 9]; [9, 9]; [0, 9]

এ কোড:

// @param (list): a jQuery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("
").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}
0
যোগ

আপনি এই ফ্যাশন মধ্যে লুপ করতে পারেন একাধিক গ্রুপে ট্যাগ মধ্যে তালিকা আউটপুট আউট।






  
  • #listGetAt(list,i)#

0
যোগ

আপনি কলগুলির মধ্যে রূপান্তর করার জন্য এটি চেষ্টা করতে পারেন।

সিএসএস:

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

এইচটিএমএল অংশ:

  • Number 1
  • Number 2
  • Number 19
  • Number 20

  • Number 21
  • Number 22
  • Number 39
  • Number 40


0
যোগ

আমি jQuery দিয়ে এটি করেছি - এটি ক্রস-প্ল্যাটফর্ম এবং একটি সর্বনিম্ন কোড।

উল নির্বাচন করুন, এটি ক্লোন করুন, এবং পূর্ববর্তী উল পরে এটি ঢোকান। কিছুটা এইরকম:

$("ul#listname").clone().attr("id","listname2").after()

পূর্ববর্তী একের পরে এটি আপনার তালিকার একটি কপি সন্নিবেশ করবে। যদি মূল তালিকাটি একটি ফ্লোট দিয়ে সাজানো থাকে: বাম, তারা পাশাপাশি উপস্থিত হওয়া উচিত।

তারপর আপনি ডান হাত তালিকা থেকে বাম দিকে তালিকা এবং অদ্ভুত আইটেম থেকে এমনকি আইটেম মুছে ফেলতে পারেন।

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

এখন আপনি ডান দুই কলাম তালিকা বাম একটি।

আরো কলামে আপনি .slice (শুরু, শেষ) এবং / অথবা : nth-child নির্বাচনকারী ব্যবহার করতে চান। অর্থাৎ, আপনার মূল UL এর পরে ঢোকানো একটি নতুন ইউএল তৈরি করার জন্য 21 টি লিস্টের জন্য আপনি .slice (8,14) করতে পারেন, তারপর আসল উল নির্বাচন করুন এবং ul: gt() এর সাহায্যে নির্বাচন করুন। 8) </কোড>।

Bibeault / Katz বইটি jQuery এ এটি একটি দুর্দান্ত সম্পদ।

0
যোগ

Using a modulo operation, you can quickly split your list into multiple lists by inserting a

    during your loop.
    
    
    
    • #i#
                    
      
      

      সীমা() এর পরিবর্তে round() এর পরিবর্তে তালিকাটির শেষে আপনার অতিরিক্ত মান নেই কিনা তা নিশ্চিত করুন এবং শেষ কলামটি ক্ষুদ্রতম।

    0
    যোগ

    এখানে আরেকটি সমাধান যা নিম্নলিখিত স্টাইলের কলাম তালিকাগুলির জন্য অনুমোদন করে:

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

    (কিন্তু এটি বিশুদ্ধ জাভাস্ক্রিপ্ট, এবং কোন fallback সহ, jQuery প্রয়োজন)

    নিম্নোক্ত একটি কোড রয়েছে যা আরে প্রোটোটাইপ সংশোধন করে একটি নতুন ফাংশন প্রদান করে যা 'চুক' নামে একটি নির্দিষ্ট ফাংশনকে প্রদত্ত আকারের অংশে বিভক্ত করে দেয়। পরবর্তী 'buildColumns' নামক একটি ফাংশন যা একটি ইউএল নির্বাচক স্ট্রিং এবং একটি সংখ্যা যা আপনার কলামগুলির মধ্যে থাকতে পারে তা নির্ধারণ করতে ব্যবহৃত হয়। ( এখানে একটি কাজ JSFiddle )

    $(document).ready(function(){
        Array.prototype.chunk = function(chunk_size){
            var array = this,
                new_array = [],
                chunk_size = chunk_size,
                i,
                length;
    
            for(i = 0, length = array.length; i < length; i += chunk_size){
                new_array.push(array.slice(i, i + chunk_size));
            }
            return new_array;
        }
    
        function buildColumns(list, row_limit) {
            var list_items = $(list).find('li').map(function(){return this;}).get(),
            row_limit = row_limit,
            columnized_list_items = list_items.chunk(row_limit);
    
            $(columnized_list_items).each(function(i){
                if (i != 0){
                    var item_width = $(this).outerWidth(),
                        item_height = $(this).outerHeight(),
                        top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                        left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));
    
                    $(this[0]).css('margin-top', top_margin);
                    $(this).css('margin-left', left_margin);
                }
            });
        }
    
        buildColumns('ul#some_list', 5);
    });
    
    0
    যোগ