对齐两个div并排显示

Question

对齐两个div并排显示

51

我有一个小问题。我正在尝试使用CSS将两个div并排对齐，但是我希望中间的div水平居中在页面上，我通过使用以下代码来实现：

#page-wrap { margin 0 auto; }

这很好地解决了问题。我想把第二个 div 放在中心页面包装的左侧，但是我无法使用浮动来实现它，尽管我确定这是可能的。

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

这是我当前有关这两个 div 的 CSS，sidebar 是红色的 div，page-wrap 是白色的 div：

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

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

- Ronnie

这个被关闭了，尽管“原始”的帖子是从2011年的？ - user13429955

6个回答

20

我不明白为什么Nick使用margin-left: 200px;而不是让另一个div向左或右浮动，我刚刚调整了他的标记，你可以使用float代替margin-left来对两个元素都设置浮动。

演示

#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这个样式选择器，它是在父元素上调用的，只是为了自动清除其父元素。

- Mr. Alien

12

可以通过样式属性来实现这一点。

<!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的较高版本（>3.0）。

- Rahul Uttarkar

4

这段HTML代码用于将三个div并排对齐，通过一些修改也可以用于两个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>

as

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

并且可以使用余下的两个作为另外两个。

<div>

并排显示。

- Dr Amit Sehgal

谢谢，这很有帮助，并且可以通过@media screen和(max-width: NNNpx) {div#fist{display:table-row;width:100%;}等轻松实现响应式设计。 - Boris Gafurov

你的代码中行 ID 在哪里？我感到困惑。 - Rohit Singh

2

没有包装器 - div#main 也可以实现这个效果。您可以使用 margin: 0 auto; 方法居中 #page-wrap，然后使用 left:-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;
    }

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

尽管如此，尼克的第二个答案更好，因为它更易于维护，如果您要调整 #page-wrap 的大小，则不必调整 #sidebar。

- matharden

1

最简单的方法是将它们都包裹在一个容器div中，并对容器应用margin: 0 auto;。这将使#page-wrap和#sidebar div在页面上居中。但是，如果你想要那种偏离中心的外观，你可以将container向左移动200px，以适应#sidebar div的宽度。

- Michael Herold

这听起来像个计划。我该如何将整个容器向左移动200像素？感谢您的快速回复。 - Ronnie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

如果你像这样包装你的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;
}