प्रत्येक आइटम व्यापक तत्व

मैं इस लेआउट बनाना चाहते रूप में एक ही चौड़ाईप्रत्येक आइटम व्यापक तत्व

enter image description here

जब कंटेनर व्यापक आइटम से छोटे है, हम Multilines में सामग्री लपेट कर सकते हैं

enter image description here

जावास्क्रिप्ट के साथ यह बहुत आसान है, उदाहरण https://jsfiddle.net/oucxsep4/ उदाहरण है।

var choices = document.querySelectorAll('li'); 
 
var maxWidth = 0; 
 
// read 
 
for (i = 0; i < choices.length; ++i) { 
 
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth) 
 
}; 
 

 
// write 
 
for (i = 0; i < choices.length; ++i) { 
 
    choices[i].style.width = maxWidth + "px"; 
 
};

ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li{ 
 
    background: red; 
 
    float: left; 
 
    margin: 5px; 
 
}

<ul> 
 
    <li>first choice</li> 
 
    <li>choice</li> 
 
    <li>This is the wider choice</li> 
 
    <li>other choice</li> 
 
</ul>

यह जावास्क्रिप्ट, केवल सीएसएस का उपयोग किए बिना यह करने के लिए संभव है? मैंने सफलता के बिना flexbox के साथ प्रयास किया है।

स्रोत

2015-07-01 Carlos

flexbox कोई ग्रिड धारणा है। विभिन्न फ्लेक्स लाइनों पर आइटम स्वतंत्र रूप से व्यवहार करते हैं, इसलिए मुझे नहीं लगता कि आप इसे फ्लेक्सबॉक्स के साथ प्राप्त कर सकते हैं। – Oriol

क्या यह आपके प्रश्न का उत्तर देने वाला एक डुप्लिकेट है? https://stackoverflow.com/questions/42656183/how-to-set-flex-items-to-equal-width-according-to-the-item-with-the-longest-cont/42659167 –

सीएसएस के साथ अकेले संभव नहीं है कि सभी भाई तत्वों की चौड़ाई सबसे व्यापक हो। हालांकि, आप दो कॉलम संरचना (width: calc(50% - 10px /* subtracts margins */);) बनाने के लिए अपनी सूची आइटम 50% की चौड़ाई देकर सीएसएस के साथ अपने अधिकांश वांछित लेआउट को प्राप्त कर सकते हैं और फिर उन्हें न्यूनतम चौड़ाई (min-width:153px; इस उदाहरण में) भी दे सकते हैं।

यदि आप सीएसएस में मैन्युअल रूप से न्यूनतम चौड़ाई निर्धारित करने में सक्षम नहीं हैं तो आपको अपने उदाहरण के समान उन भाई तत्वों के लिए न्यूनतम चौड़ाई निर्धारित करने के लिए कुछ जावास्क्रिप्ट के साथ अपने सीएसएस को पूरक करना होगा।

ul{ 
 
    margin: 0; 
 
    padding: 5px; 
 
    list-style: none; 
 
    width:50%; 
 
    background-color: #eee; 
 
} 
 

 
ul::after { 
 
    clear: both; 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
li { 
 
    background: red none repeat scroll 0 0; 
 
    display: block; 
 
    float: left; 
 
    margin: 5px; 
 
    min-width: 153px; 
 
    width: calc(50% - 10px); 
 
}

<ul> 
 
    <li>first choice</li> 
 
    <li>choice</li> 
 
    <li>This is the wider choice</li> 
 
    <li>other choice</li> 
 
</ul>

स्रोत

2015-07-05 06:13:54 IMI

उत्तर के लिए धन्यवाद । इच्छा लेआउट के समान है लेकिन बिल्कुल नहीं। कॉलम की संख्या गतिशील होना चाहिए। – Carlos

मैं एक बदसूरत समाधान

https://jsfiddle.net/y5x3znqo/2/

body { 
 
    background: #ccc 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
li { 
 
    background: red; 
 
    float: left; 
 
    margin: 5px; 
 
} 
 

 
.label { 
 
    position: absolute; 
 
} 
 

 
.hide { 
 
    visibility: hidden; 
 
}

<ul> 
 
    <li> 
 
    <span class="label">first choice</span> 
 
    <span class="hide">This is the wider choice</span> 
 
    </li> 
 
    <li> 
 
    <span class="label">choice</span> 
 
    <span class="hide">This is the wider choice</span> 
 
    </li> 
 
    <li> 
 
    <span>This is the wider choice</span> 
 
    </li> 
 
    <li> 
 
    <span class="label">other choice</span> 
 
    <span class="hide">This is the wider choice</span> 
 
    </li> 
 
</ul>

विचार विस्तृत डाल दिया जाता है है दृश्यता के साथ हर विकल्प में सेंट आइटम: छुपा। इसके लिए सबसे बड़ी वस्तु को पूर्ववत करने की आवश्यकता है, उदाहरण के लिए बैकएंड में।

स्रोत

2015-07-09 13:22:38 Carlos

यह सरल सीएसएस का उपयोग कर संभव है:

.list-container { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.list { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.list-item { 
 
    text-transform: capitalize; 
 
    background-color: rgb(200, 30, 40); 
 
    font-size: 1.3em; 
 
    text-align: left; 
 
    padding: 10px; 
 
    margin: 1px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
}

<!DOCTYPE html> 
 

 
<div class="list-container"> 
 
    <div class="list"> 
 
    <div class="list-item">fresh figs</div> 
 
    <div class="list-item">pine nuts</div> 
 
    <div class="list-item">honey</div> 
 
    <div class="list-item">balsamic vinegar</div> 
 
    </div> 
 
</div> 
 
<div class="list-container"> 
 
    <div class="list"> 
 
    <div class="list-item">fresh figs</div> 
 
    <div class="list-item">pine nuts</div> 
 
    <div class="list-item">honey</div> 
 
    <div class="list-item">balsamic vinegar</div> 
 
    </div> 
 
</div>

स्रोत

2017-03-06 19:56:26 Ericky

यह इस लेआउट को हल नहीं करता है https://i.stack.imgur.com/dgILr.png – Carlos

ऐसा करता है, आपको बस इस तरह एक अतिरिक्त कॉलम होना चाहिए।(संपादित संस्करण को देखें) प्रत्येक सूची सबसे बड़ी तत्व की चौड़ाई लेती है – Ericky

कॉलम की संख्या के संदर्भ में इस गतिशील को बनाने का कोई तरीका? प्रदत्त समाधान किसी भी प्रकार के गतिशील वातावरण में अत्यधिक उपयोगी नहीं है। मैं उम्मीद कर रहा था कि मैं सिर्फ एक सूची में सबकुछ डाल सकता हूं और सूची में अधिकतम ऊंचाई सेट कर सकता हूं ताकि इसे कई स्तंभों में लपेट सकें लेकिन फिर सब कुछ के आकार को स्वचालित रूप से समायोजित करने की आवश्यकता होगी ताकि वे समान हों। – Wade

प्रत्येक आइटम व्यापक तत्व

उत्तर

संबंधित मुद्दे