2008-11-06 11 views
6

मेरे पास ऐसी वस्तुओं की एक सूची है जो मैं एक फ़्लोटेड सूची में प्रदर्शित कर रहा हूं, सूची में प्रत्येक आइटम को निश्चित चौड़ाई पर रखता है ताकि दो पंक्तियां हों।अज्ञात लंबाई के तार प्रदर्शित करते समय सबसे अच्छा यूआई/सीएसएस संयोजन क्या है?

alt text http://x01.co.uk/floated_items.gif

possibilites:

  • डेटा प्रदर्शित करने से पहले पात्रों में से एक निर्धारित संख्या के लिए ट्रिम क्या ऐसा होने से भयानक चीज़ को रोकने के लिए सबसे अच्छा अभ्यास है। अनुमान लगाता है कि कितने पात्र "सुरक्षित" होंगे।
  • ओवरफ़्लो: छुपा हुआ। Hacky।
  • पृष्ठभूमि हटाएं और बस प्रत्येक आइटम पर एक शीर्ष सीमा है।

संभावित लेकिन मूर्खतापूर्ण:

  • कर अतिप्रवाह से प्रत्येक आइटम में एक स्क्रॉलबार है: ऑटो, इस खराब दिखेगा।
  • कंटेनर में एक पृष्ठभूमि छवि जोड़ें। यह गारंटी नहीं है कि हमेशा एक समान संख्या में आइटम होते हैं इसलिए यह विकल्प समाप्त हो जाता है।

इस परेशान मुद्दे पर किसी भी मदद की सराहना की!

उत्तर

2

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

व्यक्तिगत तौर पर मैं शायद अतिप्रवाह का उपयोग करेंगे: छिपा हुआ है कि के रूप में सभी हालात को शामिल किया गया और यह सुनिश्चित करता है कि वह हमेशा अपने लेआउट लगातार रखेंगे।

मुझे लगता है कि अंतिम विकल्प क्या सूची में जोड़ा जा सकता है पर एक तंग नियंत्रण रखने के लिए और पहली जगह में उत्पन्न समस्या को रोकने के लिए किया जाएगा। जैसा कि वे कहते हैं, इलाज के मुकाबले रोकथाम बेहतर है, हालांकि शायद अनुपयोगी है।

1

स्क्रिप्ट है कि दो के ब्लॉक में ली की तुलना और उन दोनों को सबसे ऊंची के बराबर करके इस के साथ मदद कर रहे हैं।

आमतौर पर, बल्कि सोच क्या है, हालांकि देखने के एक सीएसएस बिंदु से सबसे अच्छा है की तुलना में, आप पर विचार करना चाहिए कि क्या प्रस्तुति आप चाहते हैं, तो सीएसएस/जावास्क्रिप्ट अपने वांछित प्रभाव के लिए आप प्राप्त करने के लिए मिलता है।

यह कुछ है कि आप बस रास्ते से बाहर चाहने रहे हैं, तो एक ढाल पृष्ठभूमि छवि है कि ली के शीर्ष पर प्रकाश डाला गया है और वास्तव में इसे न भरने के बिना ब्लॉक पता चलता है काम में लें।


जोड़ना एक jQuery समाधान से लिंक: Equalize

0

एक समाधान अल्फा-आधारित पीएनजी होना होगा जो धीरे-धीरे पिछले 10px या तो आपके कंटेनर के पृष्ठभूमि रंग में टेक्स्ट को फीका करेगा। यह अच्छा लगेगा कि कुछ पाठ लंबे समय से कम से कम कम हैं, हालांकि इस मामले में जहां टेक्स्ट कंटेनर के बराबर होगा, यह थोड़े मूर्ख दिख सकता है।

बेशक

, प्रदर्शन के साथ संयोजन में: छिपा हुआ और white-space: कोई चादर

0

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

अब अगर मैं पृष्ठभूमि छवि के साथ आपकी समस्या को सही ढंग से समझता हूं, तो मुझे विश्वास है कि sliding doors पर एएलए आलेख में वर्णित तकनीकों का उपयोग करके आपकी समस्या हल हो सकती है, जहां पृष्ठभूमि छवि सामग्री के साथ फैली हुई है।

0

यहां आपके लिए कुछ विवाद है .. एक टेबल का उपयोग करें?

लगता है जैसे आपके पास डेटा का ग्रिड है, क्या एक तालिका आपके लिए इस समस्या का उत्तर देगी?

यह सवाल भी उठाता है, क्या आप वास्तव में आइटमों को एक ही ऊंचाई के रूप में चाहते हैं, या उनके पीछे काले रंग की पृष्ठभूमि समान है? आप पंक्ति की पृष्ठभूमि में काला लागू कर सकते हैं, फिर सीमाओं और मार्जिन के साथ केंद्र सफेद विभाजक बना सकते हैं।

0

आप का उपयोग कर की कोशिश कर सकते:

ul li{ 
    display:block; 
    float:left; 
    width:6em; 
    height:4em; 
    background-color:black; 
    color:white; 
    margin-right:1em; 
} 
ul{ 
    height:100%; 
    overflow:hidden; 
} 
div{ 
    height:3em; 
    overflow:hidden; 
    background-color:blue; 
} 

पार ब्राउज़र consistensy के बारे में हालांकि पता नहीं है। संपादित करें: यह HTML है जो मुझे लगता है:

<div> 
<ul> 
<li>asdf 
<li>asdf trey tyeu ereyuioquoi 
<li>fdas dasf erqwt ytwere r 
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas 
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn 
</ul> 
</div>