2

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

4

5 回答 5

4

捎带@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>

于 2009-05-08T16:07:58.050 回答
1

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

    #container {
        width: 960px;
        margin: 0px auto;
    }
    
    #sidebar {
        float: right;
    }
<div id="container">
        <div id="sidebar">
        some content
        </div>
    </div>

于 2009-05-08T21:54:48.793 回答
0

给容器 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>
于 2009-05-08T16:02:13.353 回答
0

老问题，但由于其他答案有点缺乏那个“东西”，它仍然在谷歌之上。实现这一点的最简单、最干净的方法是使用两个 wrappers。

<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;
}
于 2014-03-12T15:47:10.507 回答
-1

浮动是解决这个问题的方法。它们将始终粘在一起，除非容器小于它们的宽度之和。

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

于 2009-05-08T16:00:56.523 回答