सीएसएस

Question

के साथ बाल तत्वों की समान रूप से वितरित ऊंचाई मान लीजिए कि आपको उपयोगकर्ता को रंगों की एक सूची प्रस्तुत करने की आवश्यकता है। रंगों को एक निश्चित ऊंचाई वाली सूची में प्रदर्शित किया जाना चाहिए, प्रत्येक रंग उस ऊंचाई के बराबर अंश पर कब्जा कर लेता है।

यहाँ क्या यह चार रंगों, 90 पिक्सल की एक सूची ऊंचाई के चारों ओर एक मोटी सीमा के साथ की तरह दिखना चाहिए है:

छवि के ऊपर स्रोत पालन से फ़ायरफ़ॉक्स 3.6.13 में प्रदान की गई है :

<ul style="height: 90px; border: 5px solid black; padding: 0;"> 
    <li style="height: 25%; background: red;"> 
    <li style="height: 25%; background: blue;"> 
    <li style="height: 25%; background: yellow;"> 
    <li style="height: 25%; background: green;"> 
</ul> 

यह सब ठीक है। सूची वास्तव में 9 0 पिक्सेल ऊंची है - सीमाओं के भीतर - और प्रत्येक रंग को इस जगह का एक (प्रतीत होता है) बराबर हिस्सा मिलता है। अब, चलो Safari या Chrome में एक ही HTML/CSS प्रस्तुत करना है:

सूचना हरी पंक्ति और सीमा के बीच संकीर्ण सफेद पंक्ति। हम यहां जो देख रहे हैं उसके लिए एक बहुत ही सरल व्याख्या है: 0.25 × 90 = 22.5

सफारी में वेबकिट और क्रोम वास्तव में गैर-पूर्णांक पिक्सेल ऊंचाइयों को पसंद नहीं करता है और दशमलव को छोड़ देता है। ऊंचाई की चार पंक्तियों के साथ 22 हमें सूची के नीचे 2 पिक्सेल कुछ भी नहीं मिलता है: 90 - 4 × 22 = 2

एक स्थिर HTML फ़ाइल के संदर्भ में, हम आसानी से तत्वों की ऊंचाई 23, 22, 23, 23 पर सेट कर सकते हैं क्रमशः पिक्सेल, और सूची किसी भी ब्राउज़र में ठीक दिखाई देगी। यदि, दूसरी ओर, रंग डेटाबेस से लोड होते हैं और गणना प्रत्येक अनुरोध के साथ भिन्न होती है, तो अधिक लचीला समाधान की आवश्यकता होती है।

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

Answer 1

<li> टैग के बीच सभी अंतराल को हटाने का प्रयास करें। पूर्व के लिए ।

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

कभी कभी यह एक समस्या थी, लेकिन अपनी स्थिति में मुझे यकीन है कि मदद मिलेगी नहीं कर रहा हूँ;) बस आजमाइए;)

Answer 2

के रूप में वादा किया था, यहाँ समस्या के लिए एक जावास्क्रिप्ट समाधान है । मुझे अभी भी एक साधारण सीएसएस आधारित समाधान में बहुत दिलचस्पी है, लेकिन इस बीच, यह जवाब दूसरों को अपना काम पूरा करने में मदद कर सकता है।

स्क्रिप्ट उम्मीद दो चर प्रवेश द्वार पर घोषित करने की: list इस सूची में वस्तुओं के संग्रह (जैसे <li>) के लिए कंटेनर के डोम तत्व (जैसे <ul>), और items इंगित करना चाहिए।

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

var spaceRemaining = list.clientHeight; 
var itemsRemaining = items.length; 

while (itemsRemaining > 0) { 
    var itemHeight = Math.round(spaceRemaining/itemsRemaining); 
    items[itemsRemaining - 1].style.height = itemHeight; 
    spaceRemaining -= itemHeight; 
    itemsRemaining -= 1; 
} 

पठनीयता पर उन के पक्ष में संक्षिप्तता के लिए, यहाँ बहुत ही स्क्रिप्ट के संक्षिप्त संस्करण है:

for (var space = list.clientHeight, i = items.length; i; i--) { 
    space -= items[i-1].style.height = Math.round(space/i); 
}