自舉佈局中的浮動div

我需要使用Boostrap來做這樣的事情。頁面上的「流體」內容帶有兩個小部件 - 首先在右上角，然後在左下角。自舉佈局中的浮動div

enter image description here

WIDGET1很簡單 - 我只需要類= 「右拉」。但是如何處理第二個問題以將其保留在「內容」的頁面底部？

style="bottom:0;"不起作用：有了這個代碼

<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-->

我有這樣的結果：

enter image description here

移動的Widget 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-->

enter image description here

任何想法如何做到這一點沒有骯髒的黑客（例如我可以使用JavaScript來修復Widget2的位置）？

或（ok，ok）與他們？

來源

2012-11-26 kostik

爲什麼不下：0工作？父母相對定位？ – danwellman

發佈你的代碼... – Sowmya

@danwellman - 不，它不是。我已將實際代碼添加到問題中。 – kostik

從我看過的所有內容中，你都無法完成你想要的東西而沒有使用JavaScript。如果你漂浮文本之前預期左

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

您的內容包裝。但是您的小部件位於左上角。如果你不是把浮動內容後

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-->

來源

2012-11-26 15:26:53

謝謝，但它不起作用：http://dl.dropbox.com/u/4075902/Layout2.jpg。你看，內容不是在小部件的右邊流動 – kostik

在我發佈的jsfiddle例子中，我的工作很好。您需要向我展示一個無法解決問題的示例。 –

好的，我做了一些測試，它如何決定將文本包裝到右下角並不總是直觀。看起來，如果最後一行文本適合widget2右側的寬度，它將放在那裏，否則它會將最後一行內容保留在widget2之上。我將用信息更新解決方案。 –

我知道你想要的WIDGET2與內容共享DIV底部邊框。嘗試添加

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

到您的Widget2標記。另請嘗試：

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

如果您想將您的小部件捕捉到屏幕底部。

我對CSS有點生疏，也許正確的風格是「margin-bottom：0px」而不是「bottom：0px」，試試看。此外，拉右類似乎爲元素添加了「float = right」樣式，我不確定這是如何與「position：relative」和「position：absolute」相對應的，我將它移除。

來源

2014-03-05 23:13:18 rodix

自舉佈局中的浮動div

回答

相關問題