यदि किसी div के पास "स्पष्ट: दाएं" है, तो इसके दाईं ओर कुछ भी नहीं चलना चाहिए, है ना?

Question

मुझे लगता है कि सीएसएस "स्पष्ट" कीवर्ड का अर्थ है कि मुझे भ्रमित हो गया है।

मेरे पास कई div तत्व हैं, सभी "फ्लोट: बाएं" के साथ। दूसरे अंतिम div तत्व में भी "स्पष्ट: दाएं" है। मैंने सोचा कि बाद के तत्व को अगली पंक्ति में जाना होगा। लेकिन मेरे लिए, यह नहीं है।

यहाँ मेरी उदाहरण है:

मैं ("00:00:32") अवधि बनाने के लिए कोशिश कर रहा हूँ, अगली पंक्ति पर प्रकट:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="Number">0</div> 
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
    <div class="Duration">00:00:32</div> 
</div>​ 

इस तरह लग रहा है , थंबनेल (नीले आयताकार) के दाईं ओर।

मुझे पता है कि मैं पिछले तीन divs को किसी अन्य कंटेनर div में डाल सकता हूं, लेकिन इस प्रश्न का उद्देश्य यह समझना है कि "स्पष्ट: दाएं" शीर्षक के दाईं ओर तैरने से अवधि क्यों नहीं रोकता है।

div.Section 
{ 
    overflow:auto; 
    background:cornsilk; 
    border:2px solid navy; 
    padding:12px; 
} 

div.Section div.Thumbnail 
{ 
    width:64px; 
    height:42px; 
    background:SteelBlue; 
    foreground:Navy; 
} 

div.Number 
{ 
    width:16px; 
    margin-left:6px; 
} 

div.Duration 
{ 
    margin-left:22px; 
} 

div.Section div 
{ 
    float:left; 
} 

div.Section div.Title 
{ 
    color:DarkGreen; 
    clear:right; 
} 

, jsfiddle लिंक और, बेशक: http://jsfiddle.net/8J7V6/3/

Answer 1

clear संपत्ति को मंजूरी दे दी तत्व के बाद कि अंतरिक्ष में रखा जा रहा से तत्वों से नहीं रोकता है। यह तत्व को उस स्थान से रोकता है जहां पहले से ही उस दिशा में तत्वों को तैरते हैं। clear:left से div.Duration जोड़ने से इसे नेवी बॉक्स के नीचे रखा जाएगा। अवधि से पहले <br/> जोड़ना आपकी समस्या का समाधान कर सकता है, या जैसा कि आपने पहले ही अपने प्रश्न में कहा है, आप पिछले तीन divs के लिए एक और कंटेनर div का उपयोग कर सकते हैं।

Answer 2

मैं गद्दी और मार्जिन का इस्तेमाल किया है

यहाँ सीएसएस है। यदि आपके मामले में उपयोग करना संभव नहीं है तो निम्नलिखित समाधान उचित नहीं होगा।

http://jsfiddle.net/8J7V6/5/

Answer 3

वहाँ कुछ भी इसके बारे में सही करने के लिए चल नहीं है। आप जिस समस्या का सामना कर रहे हैं वह यह है कि आपने समय से पहले अपनी सभी सामग्री पहले से ही भेजी है, और फिर आप बाईं ओर तैरने का समय बता रहे हैं। यह अभी भी बाईं ओर तैर रहा है, यह सिर्फ सामग्री के शीर्ष पर है जो पहले से ही बाईं ओर है।

लेकिन हां, दाईं ओर समाशोधन उस तत्व को उन सभी तत्वों से पहले तोड़ देता है जो इसके ठीक पहले चलते हैं। साफ़ इसके बाद तत्वों को प्रभावित नहीं करता है।

क्या आपने using a simple <br /> after your title को आजमाया है?

Answer 4

.Duration { clear: left; } काम करना चाहिए

Answer 5

अरुस का जवाब सही है, लेकिन मैंने यह भी देखा कि किसी ने वास्तव में आपके प्रश्न का उत्तर नहीं दिया। मूल रूप से clear:left बाएं फ़्लोटिंग तत्वों को संदर्भित करता है। clear:right सही फ़्लोटिंग तत्वों को संदर्भित करता है।

चूंकि आपका तत्व बायीं तरफ तैर रहा है, ठीक नहीं, clear:right इसे प्रभावित नहीं करेगा।

दूसरी चीज जो आप कर सकते हैं वह दो पाठ तत्वों को नीले रंग के बॉक्स से अलग div में लपेटती है, उस कंटेनर div में और नीली div को तैरती है, फिर जब आप दो टेक्स्ट तत्वों को फ़्लोट करते हैं, तो आपका clear:left कोड डाल देगा टेक्स्ट के नीचे अभी भी आपके कंटेनर div के भीतर और नीली छवि के नीचे नहीं है।

इस तरह

:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="TextContainer"> 
     <div class="Number">0</div> 
     <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
     <div class="Duration">00:00:32</div> 
    </div> 
</div> 

और अपने सीएसएस से जोड़ें:

div.TextContainer { 
    float:left; 
} 

जो कुछ अन्य दृश्य शैलियों आप की जरूरत में जोड़ें।