मैं अपने कंटेनर के तल पर तैरने के लिए एक div कैसे प्राप्त करूं?

Question

मैंने फ्लोट का उपयोग करके एक कंटेनर के शीर्ष पर फ्लोट किए गए चित्र और इनसेट बॉक्स लगाए हैं: कई बार दाएं (या बाएं)। हाल ही में मैंने एक अन्य div के निचले दाएं कोने पर एक div को फ्लोट करने की आवश्यकता को सामान्य टेक्स्ट रैप के साथ जोड़ा जो आपको फ्लोट (केवल ऊपर और बाईं ओर लिपटे टेक्स्ट) के साथ मिलता है।

मैंने सोचा था कि यह अपेक्षाकृत आसान होना चाहिए, भले ही फ्लोट का कोई निचला मूल्य नहीं है, लेकिन मैं इसे कई तकनीकों का उपयोग करने में सक्षम नहीं हुआ हूं और वेब पर खोज करने से पूर्ण स्थिति का उपयोग करने के अलावा कुछ भी नहीं आया है लेकिन यह नहीं करता है सही शब्द लपेटो व्यवहार दे।

मैंने सोचा था कि यह एक बहुत ही सामान्य डिजाइन होगा लेकिन स्पष्ट रूप से यह नहीं है। अगर किसी के पास कोई सुझाव नहीं है, तो मुझे अपने पाठ को अलग-अलग बॉक्स में तोड़ना होगा और div को मैन्युअल रूप से संरेखित करना होगा, लेकिन यह अनिश्चित है और मुझे इसकी आवश्यकता हर पृष्ठ पर करने के लिए नफरत होगी।

EDIT: यहां आने वाले किसी भी व्यक्ति के लिए बस एक नोट। डुप्लीकेट के रूप में ऊपर जुड़ा हुआ प्रश्न वास्तव में डुप्लिकेट नहीं है। इनसेट तत्व के चारों ओर टेक्स्ट रैप की आवश्यकता इसे पूरी तरह से अलग बनाती है। वास्तव में, यहां शीर्ष मतदान जवाब की प्रतिक्रिया से यह स्पष्ट हो जाता है कि इस प्रश्न की प्रतिक्रिया के रूप में लिंक किए गए प्रश्न का उत्तर गलत क्यों है। वैसे भी, अभी भी इस समस्या का एक सामान्य समाधान प्रतीत नहीं होता है, लेकिन कुछ समाधान यहां पोस्ट किए गए हैं और जुड़े हुए प्रश्नों में विशिष्ट मामलों के लिए काम कर सकते हैं।

Comments

मैं इस "नीचे से फ़्लोट" मुद्दे पर काम करूँगा जैसे ही मैं यह पता

— लगाऊंगा

@ शोग 9 निष्कर्ष: सीएसएस को एक "सिंक" तत्व की आवश्यकता है।

— गेलबियर

यहां अधिकांश उत्तर "डूब" तत्व के आसपास और ऊपर लपेटने के लिए पाठ की आवश्यकता की उपेक्षा करते हैं। लेकिन स्टु का जवाब काम करता है (JQuery के साथ)।

— स्टीव बेनेट

मैं यह नहीं देखता कि यह मजाकिया है, मैं जानना चाहता हूं कि आप वास्तविक जीवन में सबसे पहले दाएं या बाएं तैरने का प्रबंधन कैसे करते हैं .... यह पूरी तरह से एक z- अक्ष बिंदु पर तैर रहा है।

— Wh:

फ्लेक्सबॉक्सेज़ का उपयोग करना - stackoverflow.com/a/27812717/2680216

— जोश

Answer 1

पैरेंट डिव को सेट करें position: relative, फिर इनर डिव ...

position: absolute; 
bottom: 0;

... और वहाँ तुम जाओ :)

Comments

हाँ, मैंने सोचा था कि यह भी जाने का रास्ता था, लेकिन जब आप तत्व को निरपेक्ष करने की स्थिति निर्धारित करते हैं, जिसमें कोई तत्व शामिल नहीं होता है, तो कोई शब्द रैप नहीं होता है और नीचे कोने में पाठ अस्पष्ट होता है।

— स्टीफन मार्टिन

हो सकता है कि आप स्थिति के सापेक्ष और निरपेक्ष तकनीक के साथ फ्लोट युक्त संयोजन का उपयोग कर सकते हैं।

— dylanfm

फ्लोट को दाईं ओर सेट करना और फिर एक नकारात्मक शीर्ष सापेक्ष स्थिति जैसे उदासीनता को लागू करना, छवि को उस छवि से पहले कंटेनर में पहले प्रस्तुत किए गए पाठ के नीचे / पर धकेल दिया जाता है।

— फेलिक्स लामोरौक्स

निरपेक्ष स्थिति को अस्वीकार्य समाधान के रूप में उल्लेख किया गया था, दुर्भाग्य से

— विटाली

नहीं। यह काम नहीं करता है। यह इसके बजाय पूरे पृष्ठ के निचले भाग पर स्थित है।

— एरिक एरोनेस्टी

Answer 2

इसे काम करने का एक तरीका निम्नलिखित है:

• अपने तत्वों को सामान्य की तरह छोड़ दें

• 180 डिग्री का उपयोग करके माता-पिता को घुमाएं

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle: http://jsfiddle.net/wcneY/

• अब उन सभी तत्वों को घुमाएं जो बाईं ओर तैरते हैं (उन्हें एक वर्ग दें) 180 डिग्री फिर से उन्हें सीधा रखने के लिए। देखा! वे नीचे तक तैरते हैं।

Comments

यह सबसे अच्छा समाधान है, क्योंकि आप अपनी सामग्री से गतिशील ऊंचाई रख सकते हैं! धन्यवाद

— जॉर्डन मॉरिस

हालांकि यह एक अद्भुत समाधान है, यह मेरे फ़ायरफ़ॉक्स नाइटली डेवलपर टूल को गड़बड़ कर देता है: डिव पिकर को घुमाए गए डिव और उनके अंदर की सभी चीजों को अनदेखा करना प्रतीत होता है।

— ट्रुबेनफुच 13

पाठ को निचले दाएं बॉक्स के चारों ओर लपेटने में असमर्थ: सभी अक्षर उल्टा हो जाते हैं, और नीचे से ऊपर तक (?) पढ़ते हैं। jsfiddle.net/xu8orw5L

— robert4

यह पागल आदमी है! यह काम करता है अगर आप सब कुछ उल्टा होने के बारे में बात नहीं करते हैं

— MQ87

यह शैतानों का काम है और मैं तुरंत इसका इस्तेमाल कर रहा हूं।

— स्टंबलर

Answer 3

कुछ दिनों तक विभिन्न तकनीकों से जूझने के बाद मुझे कहना होगा कि यह असंभव प्रतीत होता है। यहां तक ​​कि जावास्क्रिप्ट का उपयोग करना (जो मैं नहीं करना चाहता) यह संभव नहीं लगता है।

उन लोगों के लिए स्पष्ट करने के लिए जो समझ नहीं पाए हैं - यह वही है जो मैं देख रहा हूं: प्रकाशन में यह एक इनसेट (चित्र, तालिका, आकृति, आदि) को लेआउट करने के लिए काफी सामान्य है ताकि इसकी नीचे की रेखाएं आखिरी के नीचे से ऊपर उठें इनसेट के चारों ओर एक ब्लॉक (या पेज) के टेक्स्ट की लाइन, इनसेट के चारों ओर एक प्राकृतिक तरीके से ऊपर और दाईं या बाईं तरफ इनसेट के साथ प्रवाहित होती है। Html / css में इनसेट के शीर्ष को एक ब्लॉक के शीर्ष के साथ ऊपर करने के लिए फ्लोट शैली का उपयोग करना तुच्छ है, लेकिन मेरे आश्चर्य के लिए पाठ के नीचे लाइन और इनसेट को एक सामान्य लेआउट कार्य होने के बावजूद असंभव प्रतीत होता है ।

मुझे लगता है कि मुझे इस आइटम के लिए डिज़ाइन लक्ष्यों को फिर से देखना होगा जब तक कि किसी के पास अंतिम सुझाव न हो।

Comments

नहींं - यह प्रिंट प्रकाशन नहीं है। कुछ चीजें हैं जो असाधारण रूप से कठिन हैं या असंभव हैं बस html / css का उपयोग करना।

— त्रिंगमर

मुझे पता है कि यह अब बहुत ख़तरनाक है, लेकिन सवाल का यह संस्करण है, जब मेरे पास एक ही समस्या थी और मैंने इसे डिस्प्ले का उपयोग करके हल किया: फ्लेक्स और एक बहुत ही उच्च फ्लेक्स-ग्रो राशि और कंटेनर के साथ एक शीर्ष कंटेनर सेट करना मैं बस फ्लेक्स-ग्रो के रूप में नीचे तक तैरना चाहता था: 1. और निश्चित रूप से बढ़ने की दिशा को स्तंभ होना चाहिए।

— एलेक्जेंड्रा

@ अलेक्जेंड्रा नीचे दायां बॉक्स अपने कोनों के चारों ओर पाठ को धक्का देता है जैसे कि सामान्य फ्लोट्स करते हैं? "पाठ प्रवाह" ओपी की आवश्यकताओं में से एक है

— एजाज़

मुझे पहले भी इस तरह की समस्याओं का सामना करना पड़ा था और मैं इसे खींचने के लिए सीएसएस ग्रिड का उपयोग करता हूं। यदि केवल आपने समस्या का एक दृश्य प्रतिनिधित्व संलग्न किया था। सीएसएस ग्रिड ने हमें बचाने के लिए आने के 11 साल बाद इस सवाल का जवाब दिया होगा।

— राकू

Answer 4

मैंने इसे JQuery में फ्लोट राइट के ऊपर एक शून्य चौड़ाई अकड़ तत्व डालकर प्राप्त किया है, फिर स्ट्रेट (या पाइप) को माता-पिता की ऊंचाई के अनुसार छोटा करके बच्चे की ऊंचाई को बढ़ाया।

इससे पहले कि मैं स्थिति निरपेक्ष दृष्टिकोण का उपयोग कर रहा हूँ में js kicks, जो काम करता है लेकिन पाठ प्रवाह को पीछे करने की अनुमति देता है। इसलिए मैं अकड़ दृष्टिकोण को सक्षम करने के लिए स्थैतिक स्थिति पर स्विच करता हूं। (हेडर मूल तत्व है, कटआउट वह है जिसे मैं नीचे दाईं ओर चाहता हूं, और पाइप मेरी अकड़ है)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

सीएसएस

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

पाइप को पहले आना चाहिए, फिर कटआउट, फिर HTML ऑर्डर में टेक्स्ट।

Comments

यह बहुत काम की है और स्टाइल के लिए जावास्क्रिप्ट का उपयोग करना हमेशा एक आखिरी-खाई की गिरावट होती है क्योंकि यह बहुत आसानी से गड़बड़ हो जाती है यदि आप बाद में अपना सीएसएस बदलते हैं। लेकिन हां, यह काम करता है, इसलिए यदि शब्द विभाजन के साथ उस दिव्य रेखा को सबसे नीचे रखना महत्वपूर्ण है: इसके लिए जाएं।

— मिटाएं

यह मेरे लिए काम करता है, लेकिन मैं इसे सटीक नहीं हो सकता। मुझे लगता है। वहाँ () अपराधी हो सकता है। तब लगता है जब फ्लोटिंग ब्लॉक के चारों ओर बहुत सारे ब्लॉक-लेवल टेक्स्ट (जैसे मल्टीपल डिव और पैराग्राफ) लपेटे जाते हैं, .height () टेक्स्ट को कैसे तोड़ता है, इस पर निर्भर करता है।

— atwixtor

मैं दूसरे तरीके से गया और कंटेनर की चौड़ाई (हेडर) की जांच की और सामग्री के एक टुकड़े को मुझे (लोगो) के चारों ओर लपेटना पड़ा और पूरी तरह से तैनात सामग्री (नेविगेशन) पर अधिकतम-चौड़ाई निर्धारित की। कोई तैरता नहीं और कोई अतिरिक्त तत्व नहीं। अभी भी जेएस है और यह जानने पर निर्भर करता है कि आपको क्या लपेटना है।

— icrf

यह काम। बस इसे बनाने के लिए एक विंडो आकार बदलने वाले हैंडलर को भी याद रखें। और मुझे आंतरिक बॉक्स के मार्जिन को मैन्युअल रूप से घटाना पड़ा।

— डेस्पायर

Answer 5

यह पृष्ठ के निचले भाग पर एक निश्चित div डालता है और नीचे स्क्रॉल करते ही आपको ठीक कर देता है

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Comments

यह वह नहीं करता है जो वह करने की कोशिश कर रहा है। @Timoty और @Yona ने इसे सही पाया।

— एडम

Answer 6

डिव को दूसरे डिव में रखें और पेरेंट डिव के स्टाइल को position:relative;तब सेट करें जब चाइल्ड डिव पर निम्नलिखित सीएसएस गुण सेट करें:position:absolute; bottom:0;

Comments

टिमोथी के लिए मेरी टिप्पणी देखें। जैसा कि आप यहाँ देख सकते हैं: emsoft.ca/absolutebottomtest.html वर्ड रैप काम नहीं करता है। और कुछ सामग्री अस्पष्ट है।

— स्टीफन मार्टिन

यह सही समाधान है अगर आपको चाइल्ड डिव के अंदर किसी पाठ की आवश्यकता नहीं है।

— ऐनाडॉन

Answer 7

यदि आप ब्लॉक के किनारे पर जा रहे पाठ की केवल सबसे नीचे की रेखा के साथ ठीक हैं (जैसा कि पूरी तरह से चारों ओर और उसके नीचे है, जिसे आप ब्लॉक को समाप्त किए बिना और एक नई शुरुआत के बिना नहीं कर सकते हैं), यह मूल ब्लॉक के निचले कोनों में से एक को एक ब्लॉक फ्लोट करना असंभव नहीं है। यदि आप एक ब्लॉक के भीतर एक पैरा टैग में कुछ सामग्री डालते हैं और ब्लॉक के निचले दाएं कोने के लिए एक लिंक फ़्लोट करना चाहते हैं, तो पैरा ब्लॉक के भीतर लिंक डालें और इसे फ़्लोट में सेट करें: दाएं, फिर स्पष्ट के साथ एक डिव टैग में डालें : दोनों ही अनुच्छेद टैग के अंत में नीचे सेट हैं। अंतिम div यह सुनिश्चित करने के लिए है कि मूल टैग फ्लोट किए गए टैग को घेरता है।

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

Answer 8

यदि आप मूल तत्व को स्थिति के रूप में सेट करते हैं: रिश्तेदार, तो आप बच्चे को नीचे की सेटिंग स्थिति में सेट कर सकते हैं: निरपेक्ष; और निचला: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

Answer 9

यदि आप पाठ को अच्छी तरह से लपेटना चाहते हैं: -

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

Answer 10

मुझे पता है कि यह सामान पुराना है, लेकिन मैं हाल ही में इस समस्या में भाग गया।

पूर्ण स्थिति divs का उपयोग करें सलाह वास्तव में मूर्खतापूर्ण है, क्योंकि संपूर्ण फ्लोट चीज़ पूरी तरह से खो देता है पूर्ण स्थिति के साथ ..

अब, मुझे एक सार्वभौमिक समाधान नहीं मिला, लेकिन बहुत से मामलों में प्रॉप फ़्लोटिंग डिव का उपयोग केवल पंक्ति में कुछ प्रदर्शित करने के लिए किया जाता है, जैसे स्पैन तत्वों की एक श्रृंखला। और आप लंबवत संरेखित नहीं कर सकते।

एक समान प्रभाव को प्राप्त करने के लिए आप यह कर सकते हैं: div फ्लोट न करें, लेकिन यह निर्धारित करें कि यह संपत्ति को प्रदर्शित करता है inline-block। तब आप इसे लंबवत रूप से संरेखित कर सकते हैं लेकिन यह आपको प्रसन्न करता है। तुम सिर्फ सेट माता पिता की div संपत्ति की जरूरत है vertical-alignया तो करने के लिए top, bottom, middleयाbaseline

मुझे आशा है कि किसी की मदद करता है

Comments

यह सामान्य परिस्थितियों में काम करता है, लेकिन कोई विचार नहीं है, लेकिन jQueryMobile के साथ यह पूरी तरह से गैर-कार्यात्मक है।

— 12 बज गए

यह ठीक वैसा ही है जैसा कि नीचे या बगल में div को संरेखित करने के लिए आवश्यक है, बड़ी मदद

— StudioX

Answer 11

फ्लेक्सबॉक्स की शुरुआत के साथ , यह बहुत हैकिंग के बिना काफी आसान हो गया है। align-self: flex-endबाल तत्व पर इसे क्रॉस-अक्ष के साथ संरेखित करेगा ।

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

आउटपुट:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Comments

आपको लगता है कि इस प्रश्न को पूरी तरह से पढ़ा नहीं गया है .. इसे नीचे की स्थिति में लाना आसान है, लेकिन यह वांछित अस्थायी व्यवहार नहीं देता है।

— डेनिस 98

मैं नहीं कर सकता, क्योंकि मैं दुर्भाग्य से एक जवाब नहीं है और sth नहीं देखते हैं। उत्तर के साथ गलत है, इसमें सुधार की आवश्यकता होगी।

— डेनिस 98

Answer 12

मुझे यह समाधान लंबे समय से मिल रहा था। यह वही है जो मुझे मिलता है:

संरेखित-स्व: फ्लेक्स-एंड;

लिंक: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ हालांकि, मुझे याद नहीं है कि मैंने यह लिंक कहां से खोला है। आशा करता हूँ की ये काम करेगा

Answer 13

मैं सिर्फ एक टेबल करूंगा।

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

और सीएसएस:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

इसे क्रिया में देखें:
http://jsfiddle.net/mLphM/1/

Answer 14

मैंने इन तकनीकों में से कई की कोशिश की, और निम्नलिखित ने मेरे लिए काम किया, इसलिए यदि बाकी सभी यहां पर विफल रहे तो यह कोशिश करें क्योंकि यह मेरे लिए काम करता है :)।

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

Answer 15

A ने @ dave-kok का यह तरीका चुना। लेकिन यह केवल तभी काम करता है जब पूरी सामग्री बिना स्क्रॉल के सूट करती है। मैं सराहना करता हूं कि क्या कोई सुधार करेगा

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

यहाँ कोड है http://jsfiddle.net/d9t9joh2/

Answer 16

यह अब फ्लेक्स बॉक्स के साथ संभव है। बस पैरेंट डिव के 'डिस्प्ले' को 'फ्लेक्स' के रूप में सेट करें और 'मार्जिन-टॉप' प्रॉपर्टी को 'ऑटो' में सेट करें। यह दोनों div की किसी भी संपत्ति को विकृत नहीं करता है।

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

Answer 17

निश्चित नहीं है, लेकिन पहले से पोस्ट किया गया एक परिदृश्य काम कर रहा था यदि आप स्थिति का उपयोग करते हैं: चाइल्ड डिव पर पूर्ण के बजाय सापेक्ष ।

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

और टेबल नहीं ...!

Answer 18

यदि आपको सापेक्ष संरेखण की आवश्यकता है और DIV का अभी भी आपको वह नहीं दिया जा रहा है जो आप चाहते हैं, तो बस उस तालिका का उपयोग करें और उस सेल में valign = "bottom" सेट करें जिसे आप नीचे की ओर संरेखित सामग्री चाहते हैं। मुझे पता है कि यह आपके सवाल का एक बढ़िया जवाब नहीं है क्योंकि DIV तालिकाओं को बदलने के लिए है, लेकिन यह वही है जो मुझे हाल ही में एक छवि कैप्शन के साथ करना था और इसने अब तक त्रुटिपूर्ण रूप से काम किया है।

Answer 19

मैंने इस परिदृश्य को पहले भी पोस्ट करने की कोशिश की;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

पूर्ण स्थिति पेज लोड करने पर ब्राउज़र के सबसे निचले हिस्से में div को ठीक करती है, लेकिन जब आप स्क्रॉल करते हैं यदि पृष्ठ लंबा है तो यह आपके साथ स्क्रॉल नहीं करता है। मैंने स्थिति को सापेक्ष होने के लिए बदल दिया और यह एकदम सही है। Div सीधे लोड पर नीचे तक जाता है इसलिए आप वास्तव में इसे तब तक नहीं देखेंगे जब तक आप नीचे नहीं पहुंच जाते।

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Comments

इसे अज्ञात ऊंचाई के साथ काम करने का कोई तरीका? दुर्भाग्य से मार्जिन-टॉप: -100%; कंटेनर ऊंचाई को संदर्भित करता हूं जिसका मैं अनुमान लगा रहा हूं।

— क्रिश्चियन

Answer 20

एक दिलचस्प दृष्टिकोण सही फ्लोट तत्वों के एक जोड़े को एक दूसरे के ऊपर ढेर करना है।

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

केवल समस्या यह है कि यह केवल तभी काम करता है जब आप बॉक्स की ऊंचाई जानते हैं।

Answer 21

स्टु का जवाब अब तक काम करने के सबसे करीब आता है, लेकिन यह अभी भी इस तथ्य को ध्यान में नहीं रखता है कि पाठ के अंदर लपेटने के तरीके के आधार पर आपकी बाहरी div की ऊंचाई बदल सकती है। तो, आंतरिक div ("पाइप" की ऊंचाई को बदलकर) को केवल एक बार पर्याप्त नहीं करना होगा। उस परिवर्तन को एक लूप के अंदर होना होता है, इसलिए आप लगातार जांच कर सकते हैं कि क्या आपने अभी तक सही स्थिति हासिल की है, और यदि आवश्यक हो तो आसानी से पढ़ा जा सकता है।

पिछले उत्तर से सीएसएस अभी भी पूरी तरह से मान्य है:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

हालाँकि, जावास्क्रिप्ट को इस तरह दिखना चाहिए:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

Answer 22

मुझे पता है कि यह बहुत पुराना धागा है लेकिन फिर भी मैं इसका जवाब देना चाहूंगा। अगर कोई नीचे दिए गए css & html को फॉलो करता है तो यह काम करता है। बाल फुटर डिव गोंद की तरह नीचे से चिपक जाएगा।

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

Answer 23

margin-topअपने कंटेनर के नीचे पाद लेख सेट करने के उद्देश्य से सीएसएस संपत्ति का उपयोग करने के लिए । और text-align-lastपाद लेख सामग्री को केंद्र में सेट करने के लिए सीएसएस संपत्ति का उपयोग करें ।

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Answer 24

ओह, यंगस्टर्स .... यहां आप हैं:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

कोई पूर्ण स्थिति नहीं! उत्तरदायी! पुराना स्कूल

Answer 25

बहुत पुराना सवाल है, लेकिन अभी भी ... आप इस तरह से पृष्ठ के नीचे एक div फ्लोट कर सकते हैं:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

आप देख सकते हैं कि जादू कहाँ होता है। मुझे लगता है कि आप इसे एक पैरेंट डिव के तल पर तैरने के लिए भी कर सकते हैं।

Comments

हालांकि यह इसके चारों ओर पाठ नहीं लपेटता है। इसके पीछे कोई पाठ दिखाई देता है।

— 21

हां, यह शब्द के सीएसएस अर्थ में "फ्लोटेड" नहीं है। यह "चला गया" है लेकिन तैरता नहीं है।

— एरिक

Answer 26

सरल ...... html फ़ाइल में दाईं ओर .... नीचे "पाद" (या नीचे की ओर div चाहते हैं) है। तो यह मत करो:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

ऐसा करें: (नीचे पाद है)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

ऐसा करने के बाद आप सीएसएस फाइल पर जा सकते हैं और बाईं ओर "साइडबार" फ्लोट कर सकते हैं। फिर "सामग्री" दाईं ओर तैरती है, फिर "पाद" दोनों को स्पष्ट करें।

मेरे लिए काम करना चाहिए।

Answer 27

मुझे यह position:absolute; bottom:0;सीएसएस के अंदर डिव आईडी में जोड़कर पहली कोशिश में काम करने के लिए मिला । मैंने मूल शैली नहीं जोड़ी position:relative;।

यह फ़ायरफ़ॉक्स और IE 8 दोनों में सही काम कर रहा है, अभी तक IE 7 में इसे आज़माया नहीं गया है।

Answer 28

एक वैकल्पिक जवाब तालिकाओं और रौशन का विवेकपूर्ण उपयोग है। पूर्ववर्ती लाइन (मुख्य सामग्री एक को छोड़कर) पर सभी टेबल सेल को पंक्तिबद्ध करने के लिए = "2" होने से आपको हमेशा अपने मुख्य टेबल सेल के तल पर एक सेल होल मिलेगा जिसे आप हमेशा वेलिन = "नीचे" डाल सकते हैं।

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

मैंने सभी दिव्यांग जवाबों की कोशिश की, मैं उन्हें वह करने में असमर्थ था जो मुझे चाहिए था।

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

Comments

टेबल आधारित डिज़ाइन को अधिकांश वेब डेवलपर्स के बीच बुरा व्यवहार माना जाता है। पृष्ठ को स्टाइल करने के लिए सीएसएस को प्राथमिकता दी जाती है, और आप उन्हीं चीजों को बहुत अधिक अर्थ अनुकूल तरीके से पूरा कर सकते हैं।

— लवएंडकोडिंग

टेबल्स बहुत बहु-प्रारूप के अनुकूल नहीं हैं (प्रिंट, स्क्रीन, मोबाइल), उनके पास कोई प्रवाह नहीं है। बस एक विकल्प की पेशकश।

— cdturner

Answer 29

यहाँ मेरा समाधान है:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

Answer 30

आप 1px चौड़ाई के साथ एक खाली तत्व का उपयोग करने की कोशिश कर सकते हैं और इसे तैर सकते हैं। फिर उस तत्व को साफ़ करें जिसे आप वास्तव में स्थिति में लाना चाहते हैं और इसे कम करने के लिए खाली तत्व की ऊँचाई का उपयोग करें।

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}