बिना किसी रैपिंग के 'फ़्लोट: बाएं' कैसे करें?

मेरे पास एक कंटेनर box1 है जिसमें एक निश्चित चौड़ाई है (जो इसकी सामग्री के आधार पर बदल सकती है)। उस बॉक्स में box2 है जिसमें एक निश्चित चौड़ाई है (यह एक आइकन हो सकता है)। box2 के बगल में, मेरे पास कुछ पाठ के साथ box3 है। मैं पाठ को box2 के दाईं ओर उपलब्ध सभी जगहों का उपयोग करना चाहता हूं। साथ एचटीएमएल नीचे चिपकाया, आपको मिलता है:बिना किसी रैपिंग के 'फ़्लोट: बाएं' कैसे करें?

Short text

अब तक तो अच्छा। यदि पाठ लंबा हो जाता है, तो यह box2 (जो मैं चाहता हूं) को लपेटता नहीं है, हालांकि, यह box1 बढ़ता नहीं है, जो मेरी समस्या है। आप मुझे बताएंगे "अरे, अगर आपने box3position: absolute बनाया है, तो आप box1 बढ़ने की उम्मीद कैसे कर सकते हैं?"। खैर, मैं तब नहीं करता, मैं को box2 के बगल में दिखाने के लिए कैसे प्राप्त कर सकता हूं, उपलब्ध सभी क्षैतिज स्थान का उपयोग करें, और box1 आवश्यक होने पर बढ़ाना? (मैं कहना है कि मैं IE6 पर यह काम आगे करना चाहते हैं, और एक मेज के उपयोग से बचने की जरूरत है?)

Long text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      #box1 { position: relative } 
      #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em } 

      /* Styling */ 
      #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } 
      #box2 { background: #999; padding: .5em; } 
      #box3 { background: #bbb; padding: .5em; } 
      body { font-family: sans-serif } 
     </style> 
     <script type="text/javascript"> 
     </script> 
    </head> 
    <body> 
     <div id="box1"> 
      <span id="box2">2</span> 
      <span id="box3">3</span> 
     </div> 
    </body> 
</html>

स्रोत

2011-04-19 avernet

दूसरा उदाहरण की तरह लग रहे करने के लिए:

एक अधिक सामान्य, आधुनिक समाधान ::after छद्म तत्व का उपयोग करें और स्पष्ट है कि इतने की तरह करने के लिए है और इसके बजाय बॉक्स 1 और बॉक्स 3 संलग्न करने के लिए नीचे बॉक्स का विस्तार करना पसंद करेंगे? – DaveGauer

आप बॉक्स 3 जरूरत है एक ब्लॉक स्तर तत्व है, इसलिए का उपयोग display:block और फिर float आईएनजी बॉक्स 2 के साथ संयोजन के रूप में एक overflow:hidden में टॉस:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      #box1 { } 
      #box2 { float:left; } 
      #box3 { display:block;overflow:hidden; } 

      /* Styling */ 
      #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } 
      #box2 { background: #999; padding: .5em; } 
      #box3 { background: #bbb; padding: .5em; } 
      body { font-family: sans-serif } 

     </style> 
     <script type="text/javascript"> 
     </script> 
     <title>How to do a `float: left` with no wrapping?</title> 
    </head> 
    <body> 
     <div id="box1"> 
      <span id="box2">2</span> 
      <span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span> 
     </div> 
    </body> 
</html>

कमाल सब बातों overflow:hidden कर सकते हैं: डी

स्रोत

2011-04-19 00:57:47

यह बहुत अच्छा काम करता है, धन्यवाद! मैंने इस समाधान को यहां अधिक जानकारी में दस्तावेज किया है (मुझे यह जानने में दिलचस्पी थी कि 'ओवरफ्लो: छुपा' का प्रभाव क्यों है), और वहां एक और समाधान भी पेश करता है, जो 'मार्जिन-बाएं' का उपयोग करता है: http: //wiki.orbeon ।com/form/doc/योगदानकर्ता-मार्गदर्शिका/ब्राउज़र # TOC-Prevent-a-box-from-extending-down- – avernet

@ एवरनेट का लिंक प्रासंगिक खंड को इंगित नहीं करता है। यहां सही लिंक है http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Prevent-a-box-from-extending-below-a-float –

'ओवरफ़्लो: छुपा' वास्तव में बहुत काम करता है इस मामले सहित कई मामलों में अच्छी तरह से। लेकिन एक समाधान जो बोर्ड में अधिक लगातार काम करता है वह है @ hesselbom के उत्तर में वर्णित स्पष्टफिक्स। एक अधिक पूर्ण ग्रिड समाधान के लिए जो अभी भी बहुत लचीला है (यानी 12-कॉलम लेआउट तक सीमित नहीं है), http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/ देखें। ढांचे http://purecss.io/ और http://materializecss.com/ भी देखें। –

-3

मैं निम्नलिखित की सलाह देते हैं:

#box1 
{ 
    position: relative; /* or some other positioned value */ 
} 

#box2 
{ 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#box3 
{ 
    margin-left: 10px; 
}

तो #box2 एक निश्चित आकार की है, तो आप बस एक मार्जिन #box3 के लिए #box2 के अपने अतिव्यापी को रोकने के लिए उपयोग कर सकते हैं, और के बाद से यह तैनात नहीं है, #box1#box3 के रूप में विकसित होगा उगता है।

स्रोत

2011-04-19 00:59:50 Jacob

चिमटा करने के लिए समय निकालने के लिए धन्यवाद, लेकिन यह मेरे लिए काम नहीं कर रहा है। आपके द्वारा सुझाए गए स्टाइल के साथ HTML यहां दिया गया है: http://goo.gl/dNWp4। @ रिचर्ड का सुझाव (http://goo.gl/3H96P) मेरे लिए काम करता है, इसलिए जब तक आप इसमें विशेष रुचि नहीं रखते हैं, इसके बारे में चिंता करने की आवश्यकता नहीं है। – avernet

आह, मुझे याद आया कि वे स्पैन थे और divs नहीं थे। यदि उन पर 'डिस्प्ले: ब्लॉक' का उपयोग किया जाता है, तो इसे बेहतर काम करना चाहिए। – Jacob

मैं देखता हूं, और इसे 'डिस्प्ले: ब्लॉक' का उपयोग करके काम करने के लिए मिला। आप बॉक्स 2 पर 'स्थिति: पूर्ण' के संयोजन का उपयोग करते हैं और बॉक्स 3 पर 'मार्जिन-बाएं' का उपयोग करते हैं, इसलिए यह बॉक्स 2 को ओवरलैप नहीं करता है। मुझे बॉक्स फ्लोट पर 'फ्लोट: बाएं' का उपयोग करके एक बहुत ही समान समाधान मिला 'स्थिति: पूर्ण'। इस खंड में "समाधान 2" देखें: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Prevent-a-box-from-extending-below- – avernet

इसे प्राप्त करने के कुछ तरीके हैं। ,

<span class="box1" style="overflow: hidden">...</span>

हालांकि: दो आम लोगों को या तो एक खाली तत्व सही होने के बाद एक clear: both के साथ इतना की तरह (इनलाइन सीएसएस सिर्फ डेमो के लिए) है:

<span class="box1">...</span> 
<br style="clear:both"/>

एक और तरीका है overflow: hidden इसलिए की तरह उपयोग करने के लिए है इन दोनों समाधानों में समस्याएं हैं। पहले के साथ आप अनावश्यक और बदसूरत मार्कअप जोड़ते हैं। और दूसरे के साथ यदि आप अपने बॉक्स के बाहर कुछ रखना चाहते हैं (जैसे position: absolute) यह दिखाई नहीं देगा। बस इसलिए मैं कर रहा हूँ स्पष्ट है, आप परिणाम आप नहीं चाहते कि

.box1::after { 
    content: ''; 
    display: table; 
    clear: both; 
}

स्रोत

2013-12-03 09:47:43 hesselbom

बिना किसी रैपिंग के 'फ़्लोट: बाएं' कैसे करें?

उत्तर

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