将两个不同的类垂直对齐 css

Question

如何将两个不同类的 div 对齐到另一个上方？

如果我有以下代码：

<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>

如何将 div1 和 div3 彼此对齐？在 div1 之上？只有 html 和 css 才有可能吗？提前致谢

Answer 1

用 flexbox 容器包裹它们，并更改元素的 order:

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  line-height: 40px;
  text-align: center;
}

.div1 {
  order: 1;
  width: 50%;
  background: red;
}

.div2 {
  order: 3;
  width: 100%;
  background: blue;
}

.div3 {
  order: 2;
  width: 50%;
  background: yellow;
}

<div class="container">
  <div class="div1">
  1
  </div>
  <div class="div2">
  2
  </div>
  <div class="div3">
  3
  </div>
</div>

Answer 2

您不能将所有 div 放在一个宽度为 100% 的容器中并执行 text-align: center 吗？

简单jFiddle给你。

.container {
  width:100%;
  text-align:center;
}

将两个不同的类垂直对齐 css

vertically align two different classes next to each other with css

css

class

vertical-alignment

将两个不同的 类 垂直对齐 css

vertically align two different classes next to each other with css

css

class

vertical-alignment

将两个不同的类垂直对齐 css