बॉक्स मॉडल का उपयोग अपनी मूल div

Question

निम्न HTML और CSS3 के नियमों का उपयोग भीतर आइटम रखने के लिए, मुझे यकीन है कि बनाने के लिए कोशिश कर रहा हूँ कि निम्नलिखित मानदंडों का पालन किया जाता है:

मैं छोड़कर काम कर रहे सभी मानदंडों से है आइटम 1 के लिए जहां बच्चे अपने माता-पिता की चौड़ाई से अधिक हो रहे हैं। प्रश्न: बच्चों को अपने माता-पिता के भीतर कैसे रखा जाए?

1. ली आइटम अपने माता पिता चौड़ाई यानी 400px
2. img, लेबल से अधिक हो सकती है, और मुद्रा की सामग्री उनके अवधि
3. मुद्रा भीतर लंबवत रूप से केंद्रित किया जाना चाहिए लपेट नहीं करना चाहिए और हमेशा पूर्ण
में प्रदर्शित होना चाहिए
4. मुद्रा को हमेशा लेबल अवधि के लिए जितना संभव हो सके प्रदर्शित किया जाना चाहिए।
5. लेबल टेक्स्ट को 2 लाइनों पर क्लैंप किया जाना चाहिए जिसमें इलिप्सिस प्रदर्शित होता है जहां यह 2 लाइनों से अधिक हो जाता है।

नोट: केवल क्रोम और सफारी वेबकिट-आधारित ब्राउज़र में काम करने की आवश्यकता है।

हालांकि, यह इस समय इस तरह दिखता है:

यह की तरह दिखना चाहिए

कोई भी विचार?

********************* JS Fiddle example ************************

<ul> 
    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim</span> 
     <span class="currency">(USD 50)</span> 
    </li> 

    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim 1 11 111 1111 11111</span> 
     <span class="currency">(USD 50)</span> 
    </li> 

    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span> 
     <span class="currency">(USD 50)</span> 
    </li> 
</ul> 


ul { 
    width: 400px; 

    background-color: yellow; 
    padding: 0; 
    margin: 0; 
} 

li { 
    display: -webkit-box; 

    padding-right: 50px; 
} 

.label { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 

    -webkit-line-clamp: 2; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: normal; 
    word-wrap: break-word; 
    line-height: 1.3em; 
    margin-right: 0.2em;  

    background-color: pink;  
} 

.currency { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 

    white-space: nowrap; 

    background-color: lightgreen;  
} 

.img { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin-right: 0.1em; 

    background-image:url('data:image/png;base64,iVBOR...); 
} 

Answer 1

निम्नलिखित काम करेंगे, मूल्य उपलब्ध कराने के व्यापक नहीं मिलता है:

http://jsfiddle.net/WDjZ3/4/

मैं बस मैं अंतरिक्ष अन्य सामग्री द्वारा लिया पता था कि इतनी पिक्सल मार्जिन-सही परिवर्तित लेबल से, फिर शेष के लिए अधिकतम-चौड़ाई जोड़ा:

.label { 
    margin-right: 3px; 
    max-width: 294px; 
} 

यदि कीमत या छवि परिवर्तनीय चौड़ाई है, तो आपको अपनी चौड़ाई पढ़ने के लिए जेएस की आवश्यकता होगी, 400px से हटा दें और उस मान को अधिकतम-चौड़ाई में जोड़ें।

यहाँ जावास्क्रिप्ट का उपयोग गतिशील रूप से अधिकतम-चौड़ाई सेट करने के लिए एक उदाहरण है: http://jsfiddle.net/WDjZ3/7/

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

मैं मूल रूप से अन्य तत्वों की चौड़ाई जाँच:

function getWidth(el) { 
    return parseInt(window.getComputedStyle(el,null).getPropertyValue("width")); 
} 

मैं तो 400px से इस चौड़ाई हटाया, और maxWidth सेट:

for (var i=0; i<imgs.length; i++) { 
    var width = 400 - (getWidth(imgs[i]) + getWidth(currencies[i])) + "px"; 
    labels[i].style.maxWidth = width; 
} 

Answer 2

मैं इस जावास्क्रिप्ट के बिना काम करने के लिए समाधान कर लिया है । हालांकि, यह केवल क्रोम और ओपेरा सहित अधिक आधुनिक ब्राउज़रों में काम करता है। यह सफारी में काम नहीं करेगा। यह नवीनतम नमूने के अपडेट होने के बाद फ़ायरफ़ॉक्स में काम करेगा। मैं शायद इसे आईई 10 में काम करने के लिए प्राप्त कर सकता हूं, लेकिन मुझे इसे और देखना होगा। इलिप्सिस केवल क्रोम/सफारी में काम करता है क्योंकि यह विक्रेता विशिष्ट है।

डेमो है http://jsfiddle.net/uLm92/1/ पर

सब हम एक flexbox कंटेनर के रूप में ली बनाने के लिए और 400px के लिए सेट है, तो फ्लेक्स आइटम (जो बाद में पर और अधिक) है कि आकार फिट करने की कोशिश करेंगे करना चाहते हैं सबसे पहले:

li { 
    /* make all items inside li as flex items */ 
    display: -webkit-flex; 
    display: flex; 

    height: 40px; 
    max-width: 400px; 
} 

अब बच्चे के सामान फ्लेक्स आइटम हैं, लेबल को फिट करने की कुंजी छवि को सेट करना और कीमत को फ्लेक्स नहीं करना है। कीमत के लिए, हम यह हमेशा 40xp विस्तृत होना चाहता है पता है, तो मैं निम्नलिखित सेट:

.img { 
    width: 40px; 
    height: 40px; 

    -webkit-flex-basis: 40px; 
    flex-basis: 40px; 
    -webkit-flex-shrink: 0; 
    flex-shrink: 0; 
} 

यह कहना है कि आईडी 40px के साथ पसंद किया और यह छोटा करने के लिए कभी नहीं।

.currency { 

    /* make anonymous box vertically centred */ 
    display: -webkit-flex; 
    display: flex; 

    -webkit-align-items: center; 
    align-items: center; 

    /* make sure it never shrinks */ 
    -webkit-flex-shrink: 0; 
    flex-shrink: 0; 
} 

अंत में, हम लेबल पाठ केंद्रित करने के लिए करना चाहते हैं:

तो हम भी कीमत कभी छोटे नहीं करने के लिए, और भी गुमनाम बॉक्स (सामग्री) केंद्र के लिए बताना चाहता हूँ। जैसा कि आपको इलिप्सिस हैक की आवश्यकता है, मैंने वेबकिट के लिए पुराने फ्लेक्सबॉक्स सिंटैक्स का उपयोग किया है। वर्ष flexbox का उपयोग कर के बिना, रेखा-क्लैंप संपत्ति काम नहीं करता:

.label {

/* need to use old flexbox for line-clamp to work 
    it is a *horrible hack* */ 
display: -webkit-box; 
display: flex; 

-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 
overflow : hidden; 
text-overflow: ellipsis; 

-webkit-box-pack: center; 
align-items: center; 

}

अन्य दो आइटम हटना कभी नहीं होगा के रूप में, .label तत्व एक ही है जो कर सकता है, इसलिए यदि कोई स्थान शेष नहीं है तो यह आकार में कम हो जाता है।