Css 并排对齐两个div_Css_Css Float

Css 并排对齐两个div

css

Css 并排对齐两个div,css,css-float,Css,Css Float,我有个小问题。我正在尝试使用CSS并排对齐两个div，但是，我希望中间div在页面中水平居中，我通过使用： #page-wrap { margin 0 auto; } 那很好。我想把第二个div放在中间换页的左侧，但是我不能使用浮动来实现这一点，尽管我确信这是可能的我想把红色的沙发推到白色沙发的旁边下面是我当前关于这两个div的CSS，侧边栏是红色div，换页是白色div： #sidebar { width: 200px; height: 400px; backgr

我有个小问题。我正在尝试使用CSS并排对齐两个div，但是，我希望中间div在页面中水平居中，我通过使用：

#page-wrap { margin 0 auto; }

那很好。我想把第二个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;
}

最简单的方法是将它们都包装在

容器div

中，并应用

边距：0 auto到容器。这将使页面上的#page wrap
和#sidebar
div居中。但是，如果您想要这种偏离中心的外观，那么您可以将容器
200px
向左移动，以说明#侧栏
div的宽度。如果您将div打包，如下所示：
<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

这是一个稍微不同的外观，所以我不确定这是你想要的。这将使所有800px
作为一个单元居中，而不是将600px
与左侧的200px
居中。基本方法是侧边栏向左浮动，但在主div内，#换页
的宽度与侧边栏的左侧边距相同，可以移动那么远
根据评论更新：对于这种偏离中心的外观，您可以执行以下操作：
<div id="page-wrap">
  <div id="sidebar"></div>
</div>

也可以在不使用wrapper-div#main的情况下执行此操作。您可以使用页边距将#换页居中：0自动；方法，然后使用左键：-n；方法定位#侧边栏并添加#换页宽度
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;
    }

但是，如果窗口小于内容，则边栏将在浏览器视口之外消失
尼克的第二个答案是最好的，因为它也更易于维护，因为如果你想调整页面的大小，你不必调整侧边栏。
我不明白尼克为什么要使用左边距：200px
将另一个div
浮动到左侧
或右侧
，我刚刚调整了他的标记，您可以对两个元素使用浮动
，而不是使用左边距

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


另外，我还使用了.clear:after
，它调用父元素，只是为了自清除父元素。
这可以通过样式属性来完成
<!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>


#主要{
显示器：flex；
}
#主要部门{
flex-grow:0；
弹性收缩：0；
弹性基准：40px；
}
红色分区
蓝色潜水艇

其结果将是：

享受。。。
请注意：这适用于更高版本的CSS（>3.0）。
HTML代码用于三个div并排对齐，也可以通过一些更改用于两个div
<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

这段代码将向响应性布局发展，因为它将调整
<div> 



根据设备宽度。
即使是一个人也能使任何人保持沉默
<div>



作为


可以用剩下的两个换两个
<div> 



肩并肩。
这个中心不就是一切吗？我希望白色的div保持居中，导航条被推到它旁边。对不起，在原来的问题中没有解释清楚。对不起，没有看到你写的最后一段。是的，我想把白色的div放在中间，把红色的div推到旁边。我会使用负边距来实现这一点吗？@Ronnie-还添加了该选项，这只是将侧边栏定位到左侧200px以匹配其宽度，使父容器相对，而侧边栏本身绝对就是允许这种情况发生的原因。@Ronnie-是的，您可以在这里看到上面的工作示例：如果窗口小于1000px（每侧为600px+200px），则边栏开始消失，但内容仅使用600px+200px。当窗口在800px和1000px之间时，是否可以使其不再居中？类似于左边距的最小值……这听起来像一个计划。我如何将整个容器移动200像素？谢谢你的快速回复。尼克的例子正是我所说的。投票给尼克！thx很有帮助，并且很容易通过@media screen和（max width:NNNpx）{div#first{display:table row；width:100%；}etc}做出响应。代码中的行id在哪里？我很困惑。虽然“原件”是2011年的，但它还是作为副本关闭了？谢谢！那太有用了！这很简单！根据您的回答，我只需要添加display:flex。谢谢
<div> 

<div>

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

<div>