固定位置后无法在 div 内浮动

Question

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

右浮动的 spans 不会在固定位置的 div 内右浮动。

我得出的结论是，如果容器的宽度为未知，在这种情况下宽度确实未知。

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

P.S 我用的是bootstrap 3，也就是说容器div（我设置为200px）实际上是class col-md-3 -> 我不知道容器的宽度，这就是为什么我需要它是动态的

Answer 1

如果没有宽度，您希望如何将 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 2

浮动在 fixed 或 absolute div 中不起作用，除非您指定 width.

您不能使用 position:fixed 定位到 bootstrap 网格内。固定定位的 div 是相对于浏览器的。你需要使用absolute定位。

Answer 3

固定位置元素相对于视口定位，或者浏览器windowitself.so当你给width:100%它需要将视口中的所有 space 调高。

如果您使用的是 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 内浮动

can't float inside div with position fixed

css

css-position

css-float