"फ्लोट: बाएं" और "फ्लोट: दाएं" div दोनों के लिए "टेक्स्ट-ओवरफ्लो: इलिप्सिस" कैसे बनाएं?

मैं हेडर इस तरह करने के लिए एक वेब डिजाइन आवश्यकता है:"फ्लोट: बाएं" और "फ्लोट: दाएं" div दोनों के लिए "टेक्स्ट-ओवरफ्लो: इलिप्सिस" कैसे बनाएं?

+-------------------------------------------------------------+ 
| +---------------------+ +-------++------------------------+| 
| | float left DIV A | | DIV C || float right DIV B  || 
| +---------------------+ +-------++------------------------+| 
+-------------------------------------------------------------+

हैडर 3 भाग हैं: डिव ए, बी, सी DIV एक नाव को छोड़ दिया, DIV बी और सी है, जबकि है सही करने के लिए तैरना। डीआईवी ए और डीआईवी बी में लंबा टेक्स्ट हो सकता है। तो ओवरफ्लो-एड टेक्स्ट को इलिप्सिस के रूप में छोटा कर दिया जाता है। डीआईवी सी में छोटा टेक्स्ट है, इसकी सामग्री को छोटा नहीं किया जाना चाहिए।

<html> 
    <head> 
     <style> 
      .header 
      { 
       width: 100%; 
       border: 2px red; 
       overflow: hidden; 
      } 
      .DivA 
      { 
       float: left; 
      } 
      .DivC 
      { 
       float: right; 
       white-space:nowrap; 
      } 
      .DivB 
      { 
       float: right; 
      } 
      .clear 
      { 
       clear: both; 
      } 
      .DivA, .DivB 
      { 
       width: 40%; 
       overflow: hidden; 
       text-overflow: ellipsis; 
       white-space: nowrap; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="header"> 
      <div class="DivA"> 
       Hello world 1 Hello world 2 Hello world 3 
       Hello world 1 Hello world 2 Hello world 3 
       Hello world 1 Hello world 2 Hello world 3 
      </div> 
      <div class="DivB"> 
       Good bye Good bye 
       Good bye Good bye 
       Good bye Good bye 
      </div> 
      <div class="DivC"> 
       No Ellipsis 
      </div> 
      <div class="clear"> 
      </div> 
     </div> 
    </body> 
</html>

पाठ-अतिप्रवाह:

मैं नीचे की तरह HTML करने की कोशिश की अंडाकार तभी काम करता है DIV एक और DIV बी (मेरे मामले में, मैं उन्हें 45% करने के लिए सेट) चौड़ाई है।

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

क्या डीवीवी ए और डीवी बी फ्लोट को ओवरफ्लो इलिप्सिस के साथ क्रमशः बाएं और दाएं बनाने का कोई तरीका है, जबकि एक ही समय में डीवी सी अपनी सर्वोत्तम चौड़ाई के अनुकूल हो सकता है?

स्रोत

2009-04-25 Morgan Cheng

तुम यहाँ क्या करने की जरूरत है जो div # एक और div # ख

की चौड़ाई से मेल खाता है div करने के लिए # सी एक मार्जिन लागू करने के लिए उदाहरण के लिए नीचे ले लो है;

<style> 
.DivA {width:250px; float:left;} 
.DivB {width:150px; float:right;} 
.DivC {margin-left:260px; margin-right:160px;} 
</style> 

<div class="DivA" /> 
<div class="DivB" /> 
<div class="DivC" />

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

यह आपको दोनों तरफ दो निश्चित कॉलम और केंद्र तत्व प्रदान करेगा जो किसी भी खाली स्थान को ले जाएगा।

स्रोत

2009-04-25 17:23:42 Phunky

इस तरह ओवरलैप कर देगा जोड़ सकते हैं, "केन्द्र" अगले करने के लिए नीचे धकेल दिया जाता है लाइन अगर ब्राउज़र विंडो संकीर्ण है। –

दरअसल, यह बहुत सच है इसलिए कंटेनर या डीवीसी पर न्यूनतम चौड़ाई का उपयोग करने की सिफारिश की जाएगी। जब भी आप फ्लोट का उपयोग करते हैं तो आप हमेशा उस बिंदु पर ब्राउज़र का आकार बदल सकेंगे जहां यह लेआउट तोड़ देगा, जब तक कि आप किसी बिंदु पर निश्चित चौड़ाई का उपयोग न करें। – Phunky

यह एक बहुत पुराना है (0 9 ') लेकिन मैं उन लोगों के लिए जवाब दूंगा जो खोज से आए हैं जैसे मैंने किया था।

चूंकि ए और बी 40% प्रत्येक हैं, इसलिए अधिकतम सी 20% है, क्योंकि हेडर 100% है। तो max-width:20%; इसमें जोड़ें और सी अगली पंक्ति में नहीं टूट जाएगा। लेकिन फिर, जब ब्राउज़र विंडो संकीर्ण हो जाती है, तो आवश्यक होने पर पाठ लपेट जाएगा।

आप इस व्यवहार नहीं करना चाहते हैं, तो आप white-space: nowrap; जो सी पाठ बी में एक

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

स्रोत

2013-04-22 12:09:29 RaphaelDDL

"फ्लोट: बाएं" और "फ्लोट: दाएं" div दोनों के लिए "टेक्स्ट-ओवरफ्लो: इलिप्सिस" कैसे बनाएं?

उत्तर

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