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内浮动。

我得出的结论是，如果容器的宽度为，则float将不起作用未知，在这种情况下，宽度确实是未知的。

所以可以解决这个问题的另一个问题是如何将一个固定位置的孩子设置为它父母的100％宽度？

P.S我正在使用bootstrap 3，这意味着容器div（我设置为200px）实际上是类col-md-3 - ＆gt;我不知道容器的宽度，这就是为什么我需要它是动态的

Answer 1

除非您指定fixed，否则

浮动在absolute或width div内无效。

您不能使用position:fixed来定位引导网格内部。固定定位的div相对于浏览器。您需要使用absolute定位。

Answer 2

如果你没有宽度，你想如何将div漂浮在另一个div中？您可以使用％：

＆＃13;

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

＆＃13;

或者，你可以在div里面定义一个宽度：

＆＃13;

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

＆＃13;

Answer 3

固定位置元素位于相对到视口或浏览器窗口本身。因此，当您给出宽度：100％时，它会占用视口中的所有空间。

如果您使用的是jquery，则可以使用可用于创建固定位置侧栏的插件。例子：

Answer 4

我用于此问题的JQuery解决方案：

-修改过的html

<div id="firstDiv 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 id="fixed" style="position:fixed"> 
    <span style="float:left">left</span>
    <span style="float:right">right</span>
</div>

-jQuery代码：

$(document).ready(function ()
{
    $('#fixed').width($('#firstDiv').width());
});

$( window ).resize(function()
{
    $('#fixed').width($('#firstDiv').width());
});

在这里，您更改了JSFiddle

不能在位置固定的div内浮动

4 个答案: