Question

我试图了解如何像打印屏幕上那样构建一个4个方框的正方形。我已经在Apple网站上找到了这种布局，我很喜欢它！

我尝试使用bootstrap和flexbox。我认为flexbox是更好的解决方案，但我没有找到重现此布局的方法。

任何人都可以帮助我弄清楚如何创建该布局吗？

Layout's screencap

Answer 1

如果您想使用引导程序，则很容易做到。

.noMargin {
  margin: 0px;
}

.one {
  background-color: red;
}

.two {
  background-color: yellow;
}

.three {
  background-color: green;
}

.four {
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row noMargin">
    <div class="col one">
      one
    </div>
    <div class="col two">
      two
    </div>
  </div>
  <div class="row noMargin">
    <div class="col three">
      three
    </div>
    <div class="col four">
      four
    </div>
  </div>
</div>

如果您想做纯html / css：

.row {
  display: flex;
  width: 100%;
}

.row div {
  width: 50%;
}

.noMargin {
  margin: 0px;
}

.one {
  background-color: red;
}

.two {
  background-color: yellow;
}

.three {
  background-color: green;
}

.four {
  background-color: blue;
}

<div class="row noMargin">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
</div>
<div class="row noMargin">
  <div class="three">
    three
  </div>
  <div class="four">
    four
  </div>
</div>

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>Box</title>
    <style>
        #div1{
            height:300px;
            width:300px;
            background-color:red;
            margin:0;
            }
        #div2{
            height:300px;
            width:300px;
            background-color:green;
            position:relative;
            left:320px;
            bottom:300px;
            }
         #div3{
            height:300px;
            width:300px;
            background-color:yellow;
            position:relative;
            bottom:280px;
            }
        #div4{
            height:300px;
            width:300px;
            background-color:blue;
            position:relative;
            left:320px;
            bottom:580px;
            }
            
    </style>
</head>

<body>

    <div id="div1">
    </div>

    <div id="div2">
    </div>

    <div id="div3">
    </div>

    <div id="div4"> 
    </div>

</body>

</html>

如何用HTML / CSS创建一个4方框的正方形

2 个答案: