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属性位置：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

老问题，但由于其他答案有点缺乏，而且＃34;某些东西＆＃34;而且它仍然在谷歌之上。最简单，最干净的方法是使用两个包装器。

<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;如果没有，并且用户有一个较窄的窗口，他们将显示一个在另一个之下。

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

5 个答案: