CSS布局 – 并排对齐两个div

我有一个小问题。我试图使用CSS并排两个div，但是，我想中心div位于页面中央的水平，我实现了这样使用：

#page-wrap { margin 0 auto; }

这工作正常。第二个div我想定位在中央页包装的左侧，但我不能设法使用浮动，虽然我相信这是可能的。

也许最好展示我所描述的例子：

我想把红色的div推到白色的div旁边。

这里是我当前的CSS关于这两个div，边栏是红色div和页面包装是白色div：

#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
    }

#page-wrap  {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
    }

任何帮助将不胜感激。

解决方法

如果你包装你的div，像这样：

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

您可以使用此样式：

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

这是一个稍微不同的看法，所以我不知道这是你的后。这将使所有800px作为一个单元，而不是以左边200px为中心的600px。基本的方法是你的边栏浮动左边，但在主div，##包装有你的边栏的宽度，因为它的左边距移动远远超过。

基于注释更新：对于这种偏心外观，您可以这样做：

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

有了这种风格：

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

原文地址：https://www.jb51.cc/css/221390.html