我如何将3个div并排对齐？

Question

我如何将3个div并排对齐？

28

我有三个div，分别是宽200像素、300像素和200像素，我该如何让它们并排对齐？所有的例子中都只包含两个div。我的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中的边框长度相等？

- user1949387

你的代码完全没问题。除此之外，你需要有一个包装器div，宽度大于（200+300+200+您在div中拥有的任何填充或边距）。 - Rakesh Juyal

2个回答

1

"

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>

as

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

并且可以使用剩下的两个参数进行另外的两个操作

<div>

并排显示。

- Dr Amit Sehgal

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

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

- Matthew Johnson · Accepted Answer

所有元素都在一行上展示

将

元素包装在一个父容器中：

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

然后设置包装器的宽度，并将所有三个 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分开。这使得代码更易于阅读和维护。

示例。

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

为了实现“高度相同”部分，您可以使用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;
}

这是代码示例。

使用 Flexbox

如果您只支持较新的浏览器（IE 10及以上版本），则Flexbox也是一个不错的选择。请务必为更好的支持添加前缀。有关前缀的更多信息可以在此处找到。

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。

网格布局方式

如果你支持现在使用网格布局，也可以完成这个操作，但是如果你要支持较老的浏览器，浏览器支持可能是一个问题。和弹性盒子例子一样的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。