फ्लोट सही और स्थिति पूर्ण एक साथ काम नहीं करता है

Question

मैं चाहता हूं कि एक पैर हमेशा अपने पैरेंट डिव के अधिकार में रहे, इसलिए मैं इसका उपयोग करता हूं float:right। यह काम करता हैं।

लेकिन मैं यह भी चाहता हूं कि इसे डालने पर अन्य सामग्री प्रभावित न हो, इसलिए मैं इसका उपयोग करता हूं position:absolute।

अब float:rightकाम नहीं करता है, मेरा div हमेशा अपने मूल div के बाईं ओर है। मैं इसे दाईं ओर कैसे ले जा सकता हूं?

Answer 1

उपयोग

position:absolute; right: 0;

float:rightपूर्ण स्थिति के लिए कोई ज़रूरत नहीं है

इसके अलावा, सुनिश्चित करें कि मूल तत्व सेट है position:relative;

Comments

यदि माता-पिता तत्व के केंद्र में चाहते हैं, तो मैं यह कैसे कर सकता हूं?

— त्रिपफोंग

आपकी सहायता के लिए धन्यवाद। मैं उपयोग करता हूं left:50%और margin-left:-??px(?? आपकी

— दिव्यांगता

@ Eivers88 के उत्तर के साथ, मुझे अभी भी 'अतिप्रवाह-य: ऑटो; यह काम करने के लिए मूल तत्व से।

— स्वर्गदूत

क्या होगा अगर डिव की चौड़ाई गतिशील है

— मुहम्मद उमर

ठीक है, मुझे वह फ्लोट मिला: पूर्ण स्थिति के लिए सही की आवश्यकता नहीं है, लेकिन ... जब आपके पास एक ही (स्थिति: रिश्तेदार) माता-पिता के अंदर दो पूर्ण तत्व होते हैं और आप चाहते हैं कि वे दाईं ओर संरेखित हों, तो दूसरे के बगल में एक? उनकी चौड़ाई गतिशील है ...

— spuas

Answer 2

सामान्यतया, floatएक सापेक्ष स्थिति कथन है, क्योंकि यह अपने मूल कंटेनर के सापेक्ष तत्व की स्थिति को निर्दिष्ट करता है (दाएं या बाएं तैरता है)। इसका मतलब यह है कि यह position:absoluteसंपत्ति के साथ असंगत है , क्योंकि position:absoluteएक पूर्ण स्थिति बयान है। आप या तो एक तत्व को फ्लोट कर सकते हैं और ब्राउज़र को उसके मूल कंटेनर के सापेक्ष स्थिति की अनुमति दे सकते हैं, या आप एक पूर्ण स्थिति निर्दिष्ट कर सकते हैं और तत्व को उसके माता-पिता की परवाह किए बिना एक निश्चित स्थिति में प्रकट होने के लिए मजबूर कर सकते हैं। यदि आप चाहते हैं कि स्क्रीन के दाईं ओर एक पूर्ण-स्थित तत्व दिखाई दे, तो आप उपयोग कर सकते हैं position: absolute; right: 0;, लेकिन इससे तत्व हमेशा स्क्रीन के दाहिने किनारे पर दिखाई देगा, भले ही इसका अभिभावक कितना ही व्यापक क्यों न हो div(इसलिए यह जीता) टी "अपने मूल div के दाईं ओर")।

Comments

माता-पिता तो divहै position: relative, इस divबल्कि स्क्रीन की तुलना में है कि माता-पिता के दाएँ छोर पर स्थित किया जाएगा।

— trysis

Answer 3

यदि आपका पूर्ण तत्व " डिस्प्ले: इनलाइन-ब्लॉक " है तो आप " ट्रांसलेक्स (-100%) " और " टेक्स्ट-अलाइन: राइट " का उपयोग कर सकते हैं।

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

आप अपने माता-पिता के सही रिश्तेदार से जुड़ेंगे

Answer 4

शायद आपको अपनी सामग्री को इस तरह विभाजित करना चाहिए जैसे कि फ्लोट का उपयोग करना:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

ध्यान दें overflow: auto;, यह सुनिश्चित करने के लिए है कि आपके कंटेनर में कुछ ऊंचाई हो। बातें चल डोम की उन्हें बाहर ले जाता है, यह सुनिश्चित करें कि अपने तत्वों को नीचे अपना भटक तैरता ओवरलैप नहीं करते हैं, एक कंटेनर सेट divके लिए एक overflow: auto(या overflow: hidden) यह सुनिश्चित करें कि तैरता जब अपनी ऊंचाई ड्राइंग के लिए जिम्मेदार रहे हैं। फ़्लोट के बारे में अधिक जानकारी और उन्हें यहाँ कैसे उपयोग करें, इसकी जाँच करें ।

Answer 5

मैं घोंसले की एक परत और एक मुश्किल मार्जिन के साथ एक सही-फ़्लोटेड तत्व को पूरी तरह से सक्षम करने में सक्षम था:

function test() {
  document.getElementById("box").classList.toggle("hide");
}

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

मैंने इसे टॉगल करने का निर्णय लिया ताकि आप देख सकें कि यह आसपास के पाठ के प्रवाह को कैसे प्रभावित नहीं करता है (इसे चलाएं और फ्लोट किए गए निरपेक्ष बॉक्स को दिखाने / छिपाने के लिए बटन दबाएं)।