在主居中的 div 旁边浮动另一个 div

Question

好吧，我有一个网站，整个东西都包装在一个容器中。 该容器以 margin:auto 居中。 我想将一段内容浮动到这个居中容器的右侧，并让它粘在它的一侧，无论用户是否调整浏览器窗口的大小等。我想知道是否有一种真正简单的方法执行此操作，而不是添加另一个巨大的 div，为其提供宽度并将居中部分浮动到左侧，将内容块浮动到右侧。 谢谢！

Answer 1

搭载@NickAllen，您想要使用绝对定位，以便侧边栏的宽度不包含在主容器的居中中。

#container {
  position: relative;
  width: 500px;
  border: 1px solid #f00;
  margin: 0px auto;
}
#sidebar {
  position: absolute;
  width: 200px;
  right: -200px;
  border: 1px solid #0f0;
}

<div id="container">
  <div id="sidebar">
    [ sidebar content ]<br>
    [ sidebar content ]<br>
  </div>
  [content]<br>
  [content]<br>
  [content]<br>
</div>

Answer 2

也许我误解了你的问题，但这不是你想要的：

    #container {
        width: 960px;
        margin: 0px auto;
    }
    
    #sidebar {
        float: right;
    }

<div id="container">
        <div id="sidebar">
        some content
        </div>
    </div>

Answer 3

给容器div赋予属性position:relative; 将您的浮动 div 作为容器 div 的第一个子级并给它

#floatingDiv
{
    position: absolute;
    top: 0;
    right: -{widthOfFloatedDiv};
}

我认为这会起作用，但未经测试

好的，所以测试了它并且它起作用

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
    <div style="position: absolute; top: 0; right: -200px; width: 200px;">
        <p>Floated DIV</p>
    </div>
    <p>container div</p>
</div>

Answer 4

老问题，但贡献，因为其他答案有点缺乏那个“东西”，而且它仍然在谷歌之上。 实现这一目标的最简单、最干净的方法是使用两个包装器。

<div class="bigWrapper">
  <div class="sidebar">Hello, I'm your sidebar</div>      

  <div class="smallWrapper">
    Put the thing you want to center here.
  </div>
</div>

使用以下 CSS：

.bigWrapper { 
    width: 1000px;
    height: auto;
    margin: auto;
}

.smallWrapper {
    width: 500px;
    height: auto;
    margin: auto;
}

.sidebar {
    width: 250px;
    float: left;
    height: auto;
}

Answer 5

浮动是实现这一目标的方法。 它们总是粘在一起，除非容器小于它们宽度的总和。

提示：确保容器足够宽以容纳两个内部 div； 如果没有，并且用户的窗口较窄，他们将在另一个下方显示一个。