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

Question

如何将两个不同类别的div对齐在一起？

如果我有以下代码：

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

如何将div1和div3彼此相邻？在div1之上？是否只能使用html和css？ 提前谢谢

Answer 1

用Flexbox容器包裹它们，并更改元素的order：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

难道你不能把所有div放在100％宽度的容器中并做一个text-align：center吗？

简单jFiddle为你。

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