119

मेरे वेबपेज में एक 'स्किनी' सूची है: उदाहरण के लिए, प्रत्येक में एक शब्द की 100 वस्तुओं की सूची। स्क्रॉलिंग को कम करने के लिए, मैं इस सूची को पेज पर दो या चार कॉलम में प्रस्तुत करना चाहता हूं। CSS के साथ मुझे यह कैसे करना चाहिए?

<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

— vsync

मुझे विश्वास है कि CSS कॉलम विकल्प करेगा। यदि आवश्यक हो तो यह विकल्प उपयोग करना और बदलना आसान है। यहाँ आपने इसे विस्तार से बताया है - kolosek.com/css-columns

— Nesha Zoric

254

CSS समाधान है: 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/

यदि IE समर्थन की आवश्यकता है, तो आपको उदाहरण के लिए जावास्क्रिप्ट का उपयोग करना होगा:

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

एक अन्य समाधान सामान्य करने के लिए वापस आने के लिए है float: leftके लिए केवल IE । आदेश गलत होगा, लेकिन कम से कम यह समान दिखाई देगा:

देखें: http://jsfiddle.net/NJ4Hw/

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

आप के साथ है कि वापस आने लागू हो सकते हैं Modernizr अगर आप पहले से ही यह प्रयोग कर रहे हैं।

— thirtydot
स्रोत

क्या liप्रत्येक कॉलम में पहले पर शीर्ष सीमा को हटाने का एक तरीका है ?

— हाँ बैरी

2

यह एक निश्चित स्थान के लिए बहुत अच्छा काम करता है, लेकिन संवेदनशील डिजाइनों के साथ एक मुद्दा बन जाता है क्योंकि कॉलम प्रदर्शन के दौरान गिरते नहीं हैं: इनलाइन या इनलाइन-ब्लॉक।

— यूनिफाइड

4

दिलचस्प तथ्य: IE केवल उपसर्गों के बिना पूरी तरह से इस सुविधा का समर्थन करने के लिए एकमात्र प्रमुख डेस्कटॉप ब्राउज़र है (IE10 के बाद से) ... ओह, विडंबना ...

— NemoStein

1

इस अतिरिक्त संपत्ति को शामिल करने के लिए बेहतर क्रॉस ब्राउज़र समर्थन के लिए आवश्यक हो सकता है list-style-position: inside;जो विशेष रूप से @vsync द्वारा बताई गई समस्या को संबोधित करता है।

— ThisClark

4

@PrafullaKumarSahu: प्रयास करें li { break-inside: avoid; }: jsfiddle.net/thirtydot/pdExf/903 । मैं CSS कॉलम से परिचित नहीं हूं, इसलिए बेहतर तरीका हो सकता है।

— १०:१०

19

यदि आप एक समाधान की तलाश कर रहे हैं जो IE में भी काम करता है, तो आप सूची तत्वों को बाईं ओर फ्लोट कर सकते हैं। हालाँकि, यह एक सूची में परिणाम देगा जो चारों ओर साँप करता है, जैसे:

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

"साफ कॉलम" के लिए एक और काम कर रहे सीएसएस समाधान: stackoverflow.com/q/54982323/1066234

— काई नैक

10

यदि आप स्तंभों का एक पूर्व निर्धारित नंबर चाहते हैं, तो आप ऊपर बताए गए अनुसार कॉलम-गणना और कॉलम-गैप का उपयोग कर सकते हैं।

हालाँकि, यदि आप सीमित ऊंचाई के साथ एक एकल स्तंभ चाहते हैं जो ज़रूरत पड़ने पर और अधिक स्तंभों में टूट जाएगा, तो इसे प्रदर्शन को फ्लेक्स में बदलकर काफी सरलता से प्राप्त किया जा सकता है।

यह IE9 और कुछ अन्य पुराने ब्राउज़रों पर काम नहीं करेगा। आप Can I का उपयोग कर सकते हैं

<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कॉलम के भीतर असमान संख्या में पंक्तियों को करेगा। जैसे पहले कॉलम में 6 आइटम, फिर 4, फिर 6, फिर 5.

— विराज असॉल्ट

अच्छा होगा यदि आप आइटम को लेबल करते हैं जैसे "आइटम 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 - इसे सरल रखें, CSS ग्रिड का उपयोग करें

इनमें से बहुत सारे उत्तर पुराने हैं, यह 2020 का है और हमें उन लोगों को सक्षम नहीं करना चाहिए जो अभी भी IE9 का उपयोग कर रहे हैं। यह सिर्फ सीएसएस ग्रिड का उपयोग करने के लिए और अधिक सरल है ।

कोड बहुत सरल है, और आप आसानी से समायोजित कर सकते हैं कि कितने कॉलम का उपयोग कर रहे हैं 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अतिप्रवाह वस्तुओं और विशेष रूप से कुछ आयाम संक्रमणों के साथ आइटम के अंदर सीएसएस के साथ quirks और मुद्दों के टन हैं , विशेष रूप से ..

यह कुल गड़बड़ है और इसे ठीक नहीं किया जा सकता है, इसलिए मैंने सरल जावास्क्रिप्ट के माध्यम से इससे निपटने की कोशिश की, और एक पुस्तकालय बनाया था जो ऐसा करता है - https://github.com/yairEO/listBreaker

डेमो पेज

— vsync
स्रोत

मुझे लगता है कि मैं क्या कर रहा था (वर्णानुक्रम में, वर्णक्रमीय, अवरोही या आरोही, स्तंभों की गिनती, स्तंभों की चौड़ाई और अधिक) करने में सक्षम था, मेरे विचार में jQuery के स्तंभकार प्लगइन को पसंद करते हैं। jQuery के कॉलम्युलाइज़र - WelcomeToTheInter.Net

— Brandito

@Brandito - ठीक है, Columnizer कोड निश्चित रूप से अधिक विकल्प है, क्योंकि यह कोड की लगभग 1,000 लाइनें है, मेरी तुलना में जो लगभग 120 लाइनों की है .. लेकिन यह अच्छी तरह से काम करती है

— vsync

हां, लेकिन मेरी समस्या को सूची के रूप में रहने के लिए सूची की आवश्यकता थी, जो कि अधिक उपयोगी / आवश्यक है जो उपयोग के मामले पर निर्भर करती है।

— ब्रैंडिटो

0

यदि आप इसका समर्थन कर सकते हैं तो सीएसएस ग्रिड संभवतः एक-आयामी सूची को दो कॉलम लेआउट में उत्तरदायी आंतरिक के साथ बनाने के लिए सबसे साफ तरीका है।

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

मोबाइल-पहला तरीका सीएसएस कॉलम का उपयोग छोटी स्क्रीन के लिए एक अनुभव बनाने के लिए किया जाता है, फिर अपने लेआउट के प्रत्येक परिभाषित ब्रेकप्वाइंट पर कॉलम की संख्या बढ़ाने के लिए मीडिया क्वेरी का उपयोग करें।

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 - इसे सरल रखें, CSS ग्रिड का उपयोग करें

डेमो पेज