css - 如何并排对齐 3 个 div？

Question

我有 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 的边框一样长？

Answer 1

一行中的所有元素

将 div 元素包装在包装器中:

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

然后设置包装器的宽度，并 float 所有三个 div:

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

然后可以删除 float ，因此 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 .