html - 将一个 div 元素放在另一个居中的 div 之前

Question

是否可以在已经居中的元素之前放置一个 div 元素？已经居中的 div 元素必须与顶部的 div 元素对齐。我正在尝试完成图片中描述的以下内容

           --------
           |      |
           |  1   |
           --------
     ----  --------
     |   | |      |
     |3  | |  2   |
      ---  --------

div block 1 和 2 将在彼此的顶部排列。我可以做一个简单的 margin: 0 auto;

.div1 .div2{
  margin: 0 auto
}

但是，我无法在 2 之前设置 div block 3。div block 3 上的 float:left 也不起作用。有没有什么方法可以在 div block 2 之前插入 div block 3，同时保持 margin: 0 auto 属性在 div block 2 上。任何帮助或指示将不胜感激

Answer 1

您可以考虑如下基于 CSS 网格的解决方案:

.container {
  display:grid;
  grid-template-columns:1fr auto 1fr;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
  grid-column:2;
}
.container > div:last-child {
  grid-column:1;
  grid-row:2;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Flexbox 的另一个想法:

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

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
}
.container > div:first-child {
  order:-2;
  margin:auto; 
}
.container > div:last-child {
  order:-1;
  margin:0;
  flex:1;
}

/*to create break line*/
.container:before {
  content:"";
  order:-1;
  flex-basis:100%;
}

/*to have the same as 3*/
.container:after {
  content:"";
  flex:1;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

也可以考虑定位:

.container {
  position:relative;
}

.container > div:not(:last-child) {
  min-height:50px;
  max-width:200px;
  outline:1px solid;
  margin:auto;
}

.container > div:last-child {
  position:absolute;
  left:0;
  bottom:0;
  width:calc((100% - 200px)/2);
  min-height:50px;
  outline:1px solid;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>