如何并排对齐 3 个 div？答案

【问题标题】：How can I align 3 divs side by side?如何并排对齐 3 个 div？
【发布时间】：2020-12-20 03:59:14
【问题描述】：

我有 3 个 div，200px、300px 和 200px 如何将它们并排对齐，我看到的所有示例都只包括 2。我的 Div1、Div2 工作正常，但 Div3 出于某种原因在 Div1 下滑动这张图片

这是我的代码

<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
 //div1
 </div>

  <div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
    //div2
  </div>
 
<div style=" float: left; width: 200px;position:relative">
//div3
 </div>

Div1上面的内容比较短，如何让Div2中的边框一样长的边框？

【问题讨论】：

您的代码完全OK。此外，您还需要一个宽度 > ( 200+300+200+ div 中的任何填充或边距) 的包装 div

标签： css html

【解决方案1】：

一行中的所有元素

将div 元素包装在一个包装器中：

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

然后设置包装器的宽度，将三个divs全部浮动：

#wrapper {
  width:700px;
  clear:both;
}
#first {
  background-color:red;
  width:200px;
  float:left;
}
#second {
  background-color:blue;
  width:300px;
  float:left;
}
#third {
  background-color:#bada55;
  width:200px;
  float:left;
}

此外，使用 ID 和/或类，并将 CSS 与 HTML 分开。这使得代码更易于阅读和维护。

fiddle。

所有元素在一行，高度相同

要完成“相同高度”部分，您可以使用display:table、display:table-row 和display:table-cell 来获得匹配的高度。它使用了一个额外的 div，所以 HTML 看起来像：

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

然后可以删除浮动，所以 CSS 看起来像：

#wrapper {
  display:table;
  width:700px;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:200px;
}
#second {
  display:table-cell;
  background-color:blue;
  width:300px;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:200px;
}

fiddle。

Flexbox 方式

如果您只支持较新的浏览器（IE 10 及更高版本），Flexbox 是另一个不错的选择。确保前缀以获得更好的支持。有关前缀的更多信息，请参阅here。

HTML

<div class="container">
  <div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
  <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>

CSS

.container {
  display:flex;
  justify-content:center;
}
.container > div {
  margin:10px;
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

Codepen。

网格方式

您现在也可以使用grid 完成此操作，但如果您支持旧版浏览器，browser support 可能会成为问题。它与 flexbox 示例中的 HTML 相同，只是 CSS 不同：

CSS

.container {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 10px;
  width:700px;
}
.container > div {
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

codepen。

【讨论】：

@user1949387 我刚刚注意到问题的“制作相同高度”部分。我更新了答案以包含满足这两个要求的方法。很高兴它有效，感谢您的接受！

【解决方案2】：

HTML代码是

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

并排。

【讨论】：