119

আমার ওয়েবপৃষ্ঠায় একটি 'চর্মসার' তালিকা রয়েছে: উদাহরণস্বরূপ, প্রতিটি দৈর্ঘ্যে এক শব্দের 100 আইটেমের একটি তালিকা। স্ক্রোলিং হ্রাস করতে, আমি এই তালিকাটি পৃষ্ঠায় দুটি বা চারটি কলামে উপস্থাপন করতে চাই। সিএসএস দিয়ে আমার কীভাবে এটি করা উচিত?

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

আমি সমাধানটি নমনীয় হওয়ার পক্ষে পছন্দ করি যাতে তালিকাটি 200 আইটেমের আকারে বাড়লে নতুন তালিকাকে সামঞ্জস্য করার জন্য আমাকে অনেকগুলি ম্যানুয়াল অ্যাডজাস্টমেন্ট করতে হবে না।

css html-lists

— user776676
সূত্র

একটি লাইব্রেরি আছে যা তা করে - github.com/yairEO/listBreaker

— 14

আমি বিশ্বাস করি যে CSS কলাম বিকল্পটি করবে। প্রয়োজনে এই বিকল্পটি ব্যবহার করা সহজ এবং পরিবর্তন। এখানে আপনি বিশদে এটি ব্যাখ্যা করেছেন - kolosek.com/css- কলামগুলি

— নেশা জোরিক

254

সিএসএস সমাধানটি হ'ল: http://www.w3.org/TR/css3-multicol/

ব্রাউজার সমর্থন হ'ল আপনি যা প্রত্যাশা করতেন ..

এটি ইন্টারনেট এক্সপ্লোরার 9 বা তার বেশি বয়সী বাদে "সর্বত্র" কাজ করে: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

দেখুন: http://jsfiddle.net/pdExf/

যদি আই সমর্থন সমর্থন প্রয়োজন হয়, আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে, উদাহরণস্বরূপ:

http://welcome.totheinter.net/columnizer-jquery-plugin/

আর একটি সমাধান হ'ল স্বাভাবিক অবস্থায় পড়ে যাওয়া float: left জন্য শুধুমাত্র আই ই । অর্ডারটি ভুল হবে তবে কমপক্ষে এটি দেখতে একই রকম দেখাবে:

দেখা: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

সাথে আপনি সেই ফলব্যাক প্রয়োগ হতে পারে Modernizr যদি আপনি ইতিমধ্যে এটি ব্যবহার করছেন।

— thirtydot
সূত্র

liপ্রতিটি কলামে প্রথম দিকে শীর্ষ সীমানা সরানোর কোনও উপায় আছে ?

— হ্যাঁ ব্যারি

2

এটি একটি স্থির জায়গার জন্য দুর্দান্ত কাজ করে তবে প্রতিক্রিয়াশীল ডিজাইনগুলির সাথে একটি সমস্যা হয়ে যায় কারণ প্রদর্শনটি ব্যবহার করার সময় কলামগুলি ধসে পড়ে না: ইনলাইন বা ইনলাইন-ব্লক।

— ইউনিফাইডাক

4

মজার তথ্য: আইই হ'ল একমাত্র প্রধান ডেস্কটপ ব্রাউজার যা উপস্থাপনা ছাড়াই এই বৈশিষ্ট্যটিকে পুরোপুরি সমর্থন করে (

— আইই

1

এই অতিরিক্ত সম্পত্তিটি অন্তর্ভুক্ত করার জন্য ক্রস ব্রাউজারের আরও ভাল সহায়তার জন্য প্রয়োজনীয় হতে পারে list-style-position: inside;যা আমি বিশ্বাস করি যে @vsync দ্বারা চিহ্নিত সমস্যাটি বিশেষভাবে সমাধান করেছে।

— ক্লার্ক

4

@ প্রফুল্লকুমারসাহু: চেষ্টা করুন li { break-inside: avoid; }: jsfiddle.net/thirtydot/pdExf/903 । আমি সিএসএস কলামগুলির সাথে খুব বেশি পরিচিত নই, সুতরাং এর থেকে আরও ভাল উপায় হতে পারে।

— ত্রিশডট

19

আপনি যদি এমন কোনও সমাধান খুঁজছেন যা আইই তেও কাজ করে তবে আপনি তালিকার উপাদানগুলি বাম দিকে ভাসাতে পারেন। যাইহোক, এর ফলে এমন একটি তালিকা তৈরি হবে যা চারপাশে সাপগুলি এই জাতীয়:

item 1 | item 2 | item 3
item 4 | item 5

ঝরঝরে কলামগুলির পরিবর্তে:

item 1 | item 4
item 2 | 
item 3 |

এটি করার কোডটি হ'ল:

ul li {
  width:10em;
  float:left;
}

liবাম থেকে ডানদিকে আইটেমগুলির প্রবাহকে আরও প্রকট করতে আপনি এস -এ একটি সীমানা-নীচে যুক্ত করতে পারেন ।

— ম্যাট হাম্পেল
সূত্র

এটি নির্দিষ্ট সংখ্যক আইটেমের জন্য কাজ করতে পারে, তবে ফলাফলটি কেবলমাত্র 2 আইটেমের জন্য সুন্দর হবে না।

— vsync

"ঝরঝরে কলামগুলি" এর জন্য আর একটি কার্যকরী CSS সমাধান: stackoverflow.com/q/54982323/1066234

— কাই নাক

10

আপনি যদি কলামগুলির প্রসেট সংখ্যা চান তবে উপরে বর্ণিত হিসাবে আপনি কলাম-গণনা এবং কলাম-ফাঁক ব্যবহার করতে পারেন।

তবে, আপনি যদি সীমাবদ্ধ উচ্চতার এমন একটি কলাম চান যা প্রয়োজনে আরও কলামগুলিতে বিভক্ত হয়, তবে এটি বেশ সহজভাবে প্রদর্শনকে ফ্লেক্সে পরিবর্তন করে অর্জন করা যেতে পারে।

এটি IE9 এবং কিছু অন্যান্য পুরানো ব্রাউজারে কাজ করবে না। আপনি ক্যান আমি ব্যবহার করতে সহায়তা পরীক্ষা করতে পারেন

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

স্নিপেট প্রসারিত করুন

— ম্যাকিয়েজ পোলেস্কি
সূত্র

2

আমি যা করছি তার খুব কাছাকাছি। একমাত্র ক্ষতিটি হ'ল কলামগুলির প্রস্থ সামগ্রীগুলির সাথে খাপ খাইয়ে নেয় না (বিভিন্ন দৈর্ঘ্যের আইটেমগুলির সাথে চেষ্টা করুন)। কলাম-প্রস্থ কীভাবে সংজ্ঞায়িত করা হয়েছে তা নিশ্চিত নয়। প্রথম উপাদানটি দিয়ে থাকতে পারে? যে কোনও ক্ষেত্রে, কীভাবে কোনও পয়েন্টার এটিকে কাটিয়ে উঠবে?

— জোর্হেজে

উচ্চতার চেয়ে কলামগুলির সংখ্যা ক্যাপ করা সম্ভব হবে? আমার চারটি কলাম পূরণ করার জন্য আইটেমগুলি দরকার এবং সিএসএস column-countকলামগুলির মধ্যে বহুসংখ্যক সারি করে। প্রথম কলামে items টি আইটেমের মতো, তারপরে ৪, তারপরে,, তারপরে ৫.

— ভার্জ অ্যাসল্ট

আপনি আইটেমগুলি যেমন "আইটেম 1", "আইটেম 2" লেবেল দিলে ভাল লাগবে যাতে দর্শকের উপাদানগুলির প্রবাহটি দেখতে পাওয়া যায়

— এলকেনাং

3

এই উত্তরটি অগত্যা স্কেল করে না তবে তালিকাটি বাড়ার সাথে সাথে কেবল সামান্য সমন্বয় প্রয়োজন। শব্দার্থকভাবে এটি দুটি তালিকাগুলি হওয়ায় এটি সামান্য পাল্টা স্বজ্ঞাত বলে মনে হতে পারে তবে এটির বাইরে এটি যে কোনও ব্রাউজারে আপনি যেভাবে চান তা দেখতে পাবেন।

ul {
  float: left;
}

ul > li {
  width: 6em;
}

<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

স্নিপেট প্রসারিত করুন

— অ্যালান হ্যাপ
সূত্র

2

2020 - এটি সহজ রাখুন, সিএসএস গ্রিড ব্যবহার করুন

এই উত্তরগুলির অনেকগুলি পুরানো হয়ে গেছে, এটি ২০২০ এবং এখনও আমরা IE9 ব্যবহার করে এমন লোকদের সক্ষম করা উচিত নয়। এটি কেবল সিএসএস গ্রিড ব্যবহার করার উপায় more ।

কোডটি খুব সহজ এবং আপনি সহজেই সেখানে কয়টি কলাম ব্যবহার করছেন তা সামঞ্জস্য করতে পারেন grid-template-columns। এটি দেখুন এবং তারপরে আপনার প্রয়োজনগুলির সাথে ফিট করার জন্য এই ঝাঁকুনির সাথে ঘুরে দেখুন ।

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

স্নিপেট প্রসারিত করুন

— maxshuty
সূত্র

1

এটি আমার পক্ষে সেরা সমাধান।

— পাটি গুটি

1

আমি খুঁজে পেয়েছি যে (বর্তমানে) ক্রোম ( Version 52.0.2743.116 m) এর মধ্যে প্রচুর পরিমাণে বিড়বিড়তা রয়েছে এবং column-countআইটেমের অভ্যন্তরে ওভারফ্লো আইটেমগুলি এবং পরম অবস্থানের উপাদানগুলির বিষয়ে CSS এর সমস্যা রয়েছে , বিশেষত কিছু মাত্রার ট্রানজিশন সহ ..

এটি মোট জগাখিচুড়ি এবং এটি সমাধান করা যায় না, তাই আমি সহজ জাভাস্ক্রিপ্টের মাধ্যমে এটি মোকাবিলার চেষ্টা করেছি, এবং এটি একটি লাইব্রেরি তৈরি করেছিলাম যা এটি করে - https://github.com/yairEO/listBreaker

ডেমো পৃষ্ঠা

— VSync
সূত্র

আমি jQuery কলামাইজার প্লাগইনটি পছন্দ করি, আমার মতে আমি যা করছিলাম তার জন্য এটির কার্যকারিতা ছিল (বর্ণানুক্রমিকভাবে সাজানো, উতরাই বা আরোহণ, কলামগুলির সংখ্যা, কলামগুলির প্রস্থ এবং আরও অনেক কিছু) able jQuery কলামাইজার - স্বাগতমToTheInter.Net

— ব্র্যান্ডিটো

@ ব্র্যান্ডিটো - ভাল, কলামীজার কোডটি অবশ্যই আরও বিকল্প রয়েছে, যেহেতু এটি প্রায় এক হাজার লাইনের কোড, আমার তুলনায় যা প্রায় ১২০ লাইনের .. তবে কাজটি ভাল করে

— ভিএনসিএন

হ্যাঁ তবে আমার সমস্যাটির তালিকাকে একটি তালিকা হিসাবে থাকতে প্রয়োজন, যা বেশি দরকারী / প্রয়োজনীয় তা ব্যবহারের ক্ষেত্রে নির্ভর করে।

— ব্র্যান্ডিতো

0

আপনি যদি এটি সমর্থন করতে পারেন তবে CSS গ্রিডটি প্রতিক্রিয়াযুক্ত অভ্যন্তরগুলির সাথে দুটি কলাম লেআউটে এক-মাত্রিক তালিকা তৈরির জন্য সম্ভবত সবচেয়ে পরিষ্কার উপায়।

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

<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>
<ul>

স্নিপেট প্রসারিত করুন

এটি দুটি কী লাইন যা আপনাকে আপনার 2 কলাম লেআউট দেবে

display: grid;
grid-template-columns: 50% 50%;

— mattLummus
সূত্র

0

মোবাইলের প্রথম উপায়টি হ'ল ছোট পর্দার জন্য একটি অভিজ্ঞতা তৈরি করতে CSS কলামগুলি ব্যবহার করা তারপরে আপনার লেআউটের প্রতিটি সংজ্ঞায়িত ব্রেকপয়েন্টগুলিতে কলামগুলির সংখ্যা বাড়ানোর জন্য মিডিয়া ক্যোয়ারীগুলি ব্যবহার করুন ।

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

স্নিপেট প্রসারিত করুন

— জোশ হাবদাস
সূত্র

0

এখানে আমি কি করেছি

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}

<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>0</li>
</ul>

স্নিপেট প্রসারিত করুন

— GuruKay
সূত্র

কলামগুলিতে কোনও তালিকা ভাঙ্গার কোনও উপায় আছে কি?

2020 - এটি সহজ রাখুন, সিএসএস গ্রিড ব্যবহার করুন

ডেমো পৃষ্ঠা