बूटस्ट्रैप लेआउट में फ़्लोटिंग divs

Question

मुझे बूस्ट्रैप का उपयोग करके ऐसा कुछ करने की ज़रूरत है। पृष्ठ पर "द्रव" सामग्री इसके अंदर दो विजेट्स के साथ - पहले ऊपर-दाएं और दूसरी बाईं ओर बाईं ओर।

WIDGET1 आसान है - मैं तो बस जरूरत वर्ग = "पुल सही"। लेकिन पृष्ठ के निचले हिस्से में इसे "सामग्री" को चारों ओर तैरते हुए दूसरे व्यक्ति के साथ क्या करना है?

style="bottom:0;" काम नहीं करता:

विजेट 2 बढ़ते नीचे भी मदद नहीं करता है:

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="offset1 span8 pull-right"> 
     ... Widget 1... 
    </div> 
     .... a lot of content .... 
    <div class="span8 pull-left" style="bottom:0;margin-left: 0;"> 
     ... Widget 2... 
    </div> 
    </div> 
</div><!--/.fluid-container--> 

इस कोड

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="offset1 span8 pull-right"> 
    ... Widget 1... 
    </div> 

    <div class="offset1 span8 pull-left" style="bottom:0;"> 
    ... Widget 2... 
    </div> 

    .... a lot of content .... 

    </div> 

</div><!--/.fluid-container--> 

होने मैं एक परिणाम के रूप में इस राशि

कोई विचार यह है कि गंदी हैक्स के बिना ऐसा कैसे करें (उदाहरण के लिए मैं विजेट 2 स्थिति को ठीक करने के लिए जावास्क्रिप्ट का उपयोग कर सकता हूं)?

या (ठीक है, ठीक है) उनके साथ?

Answer 1

मैंने जो कुछ पढ़ा है, वह आप जावास्क्रिप्ट के बिना बिल्कुल वही नहीं कर सकते हैं जो आप चाहते हैं। की उम्मीद के रूप में आप पाठ से पहले छोड़ दिया

<div style="float:left;">widget</div> here is some CONTENT, etc. 

आपका सामग्री wraps नाव है। लेकिन आपका विजेट ऊपरी बाईं ओर है। आप के बजाय सामग्री के बाद नाव डाल दिया

here is some CONTENT, etc. <div style="float:left;">widget</div> 

फिर अपनी सामग्री यदि सामग्री की अंतिम पंक्ति विजेट के अधिकार के लिए फिट कर सकते हैं विजेट के अधिकार के लिए अंतिम पंक्ति को रैप करेगा, अन्यथा कोई रैपिंग किया जाता है । सीमाओं और पृष्ठभूमि वास्तव में पिछले उदाहरण में जारी की जगह शामिल करने के लिए, ज्यादातर लोगों को जोड़ें:

here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div> 

अपने प्रश्न में आप बूटस्ट्रैप जो सिर्फ row-fluid::after { content: ""} जो सीमा/पृष्ठभूमि समस्या का समाधान कहते हैं का उपयोग कर रहे हैं।

अपनी सामग्री को ले जा रहा है आप एक पंक्ति चादर दे देंगे: http://jsfiddle.net/jJNPY/34/

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="offset1 span8 pull-right"> 
    ... Widget 1... 
    </div> 
    .... a lot of content .... 
    <div class="span8" style="margin-left: 0;"> 
    ... Widget 2... 
    </div> 


    </div> 

</div><!--/.fluid-container--> 

Answer 2

मैं समझता हूँ कि आप WIDGET2 चाहते हैं कि सामग्री div के साथ नीचे सीमा साझा करने। अपने WIDGET2 टैग करने के लिए

style="position: relative; bottom: 0px" 

जोड़ने का प्रयास करें। यह भी प्रयास करें:

style="position: absolute; bottom: 0px" 

यदि आप स्क्रीन के नीचे अपने विजेट को स्नैप करना चाहते हैं।

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