Question

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

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

div块1和2将彼此对齐。我可以做一个简单的保证金：0 auto;

.div1 .div2{
  margin: 0 auto
}

但是，我在将div块3设置在2之前遇到了麻烦。在div块3上的float：left也不起作用。有什么方法可以将div块3插入2之前，同时保持空白：div块2上的0 auto属性。任何帮助或指针将不胜感激

Answer 1

我主张使用CSS Grid和<div id="popQuestModal" class="modal" data-keyboard="false" data-backdrop="static"> <form class="modal-content" id="quistionnaire"> <div class="container"> <h1 id="popQuestion" style="text-align:center">. . .</h1> <hr> <div id="packageOption1" class="form-check form-check-inline" style="margin-top:20px;"> <input type="radio" class="form-check-input" id="radOption1" name="choice" style="width:2em; height:2em"> <label id="popOption1" class="form-check-label" for="materialInline1" style="font-size:20px"></label> </div> <div id="packageOption2" class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="radOption2" name="choice" style="width:2em; height:2em"> <label id="popOption2" class="form-check-label" for="materialInline2" style="font-size:20px"></label> </div> <div id="packageOption3" class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="radOption3" name="choice" style="width:2em; height:2em"> <label id="popOption3" class="form-check-label" for="materialInline3" style="font-size:20px"></label> </div> <div id="packageOption4" class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="radOption4" name="choice" style="width:2em; height:2em"> <label id="popOption4" class="form-check-label" for="materialInline3" style="font-size:20px"></label> </div> <label id="correctAnswer" style="display:none"></label> <hr> <h3 id="displayCorrect" style="text-align:right"></h3> </div> </form> </div>。如果您不熟悉语法，则grid-template-areas表示网格中的空白单元格。

.container { 
  display: grid;
  grid-gap: 8px;
  grid-template-areas: ". one"
                       "three two";
}
.container div {
  border: 1px dashed;
  padding: 4px;
}

.div1 {
  grid-area: one;
}

.div2 {
  grid-area: two;
  justify-self: flex-start;  
}

.div3 {
  grid-area: three;
  justify-self: flex-end;  
}

更新

我已经调整了网格项的行为，使其更像您在注释中所请求的。我从网格父级中删除了<div class="container"> <div class="div1">div 1</div> <div class="div2">div 2</div> <div class="div3">div 3</div> </div>，这使网格项可以扩展到父级容器。然后，我使用justify-content: center将justify-self和div2固定到中心。

Answer 2

您可以考虑以下基于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>

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

2 个答案: