中心4二次（1：1）div在一个大的二次div中？

Question

它的外观应该是

感谢您帮助我！

Answer 1

使用CSS-Grid使网格布局具有相等的分割

body{
  margin:0;
}
.parent{
    position: fixed;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: green;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 10px;
  
}
.child{
  background-color:white;
}

<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>

弹性方法： -

适用于大多数现代浏览器

您还可以使用flexbox使用flex-direction: row;

将其设为象限分割网格

body{
  margin:0;
}
.parent{
    position: fixed;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: green;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;  
}
.child{
  background-color:white;
  width:calc(50% - 5px);
}
.child:nth-child(odd){
  margin-right:10px;
}
.child:nth-child(n+3){
  margin-top:10px;
}

<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>