不能浮動內部DIV與固定位置

Question

http://jsfiddle.net/1351qL91/

<div style="width:200px"> 
<span style="float:left">left</span> 
<span style="float:right">right</span> 
<br/> 
<div style="position:relative"> 
    <span style="float:left">left</span> 
    <span style="float:right">right</span> 
<div> 
<br/> 
<div style="position:fixed"> 
    <span style="float:left">left</span> 
    <span style="float:right">right</span> 
</div> 

與浮子跨越右不會浮右與固定位置一個div內部。

我得出的結論是，如果容器的寬度爲 未知，則浮動將不起作用，在這種情況下，寬度確實是未知的。

那麼可以解決這個問題的另一個問題是如何設置一個固定位置的孩子到其父母的100％寬度？

PS我使用引導程序3，這意味着容器div（我設置爲200px）實際上是類col-md-3 - >我不知道容器的寬度，這就是爲什麼我需要它是動態的

Answer 1

浮動不會工作內部fixed或absolute divs，除非你指定width 。您可以使用position:fixed來定位自舉網格。固定位置的div是相對於瀏覽器的。您需要使用absolute定位。

Answer 2

如果你想浮動div在另一個如果你沒有一個寬度？你可以用％使用：

<div style="position:fixed; border:solid 1px #c1c1c1; width: 100%;"> 
 
    <span style="float:left">left</span> 
 
    <span style="float:right">right</span> 
 
</div>

或者，您可以定義一個寬度div的內部：

<div style="position:fixed; border:solid 1px #c1c1c1;"> 
 
    <span style="float:left; width:150px;">left</span> 
 
    <span style="float:right; width:150px;">right</span> 
 
</div>

Answer 3

將固定位置元素定位到相對於到視口或瀏覽器窗口本身。因此，當您給出寬度：100％時，它會佔用視口中的所有空間。

如果您使用的是jquery，那麼可以使用插件來創建固定的位置邊欄。 實例：

• http://www.berriart.com/sidr/#getstarted

• http://spoiledmilk.com/blog/sticky-sidebar/