并排对齐两个div

一尘不染

并排对齐两个div

css

我有一个小问题。我正在尝试使用CSS并排对齐两个div，但是，我希望将中心div放置在页面的水平中央，我通过使用以下方法实现了这一点：

#page-wrap { margin 0 auto; }

很好我想将第二个div放置在中心页面换行的左侧，但是尽管可以确定，但我无法使用浮点数来完成此操作。

我想将红色div推向白色div。

这是我当前关于这两个div的CSS，侧边栏是红色div，页面换行是白色div：

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

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

阅读 252

2020-05-16

共1个答案

一尘不染

如果包裹了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一个单元600px为中心，而不是以200px左侧为中心。基本方法是侧边栏向左浮动，但在主div内部，并且#page- wrap侧边栏的宽度为左侧边距以将其移到更远处。

根据评论更新： 对于这种偏心的外观，您可以这样做：

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

2020-05-16