Question

我有一个小问题。我试图使用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;
}

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

Answer 2

我不明白为什么Nick正在使用margin-left: 200px;代替将div移到left或right，我只是调整了他的标记，你可以对{8}使用float而不是margin-left。

Demo

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

另外，我使用.clear:after来调用父元素，只是为了自我清除父元素。

Answer 3

这可以由Style Property完成。

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

其结果将是：

enter image description here

...享受请注意：这适用于更高版本的CSS（＆gt; 3.0）。

Answer 4

也可以在没有包装器 - div #main的情况下执行此操作。您可以使用margin：0 auto将＃page-wrap居中;方法，然后使用左： - n ;定位#sidebar并添加#page-wrap的宽度的方法。

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

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

但是，如果窗口小于内容，侧边栏将消失在浏览器视口之外。

Nick的第二个答案是最好的，因为它更易于维护，因为如果你想调整#page-wrap的大小，你不必调整#sidebar。

Answer 5

HTML代码用于并排排列三个div，也可以通过一些更改用于两个

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

CSS将是

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

此代码将针对响应式布局进行处理，因为它将调整

的大小

<div>

根据设备宽度。甚至一个人也可以沉默任何人

<div>

作为

<!--<div id="third">third</div> -->

并且可以使用休息两个两个

<div>

并排。

Answer 6

最简单的方法是将它们包装在container div中并将margin: 0 auto;应用于容器。这将使页面上的#page-wrap和#sidebar div居中。但是，如果您想要偏离中心的外观，则可以将container 200px向左移动，以考虑#sidebar div的宽度。

对齐两个div并排

6 个答案: