Question

我试图让我的div将整个窗口均匀地切成四个均匀的正方形。

在包含50vh和display: flex的容器中，我将每个div的width和height属性设置为flex-wrap: wrap。

但是显示的是四个矩形div，而不是方形div。

我尝试将其更改为50％，但这没有帮助。这是我的代码：

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;
}
.square {
  height: 50vh;
  width: 50vh;
  border: 1px solid black;
}

＆＃13;

<div id="container">
  <div class="square">Britt</div>
  <div class="square">JOn</div>
  <div class="square">Devin</div>
  <div class="square">Brevin</div>
</div>

＆＃13;

Answer 1

这是你在找什么？

html, body {
  margin: 0;
}
#container {
  display: flex;
  flex-wrap: wrap;
}
.square {
  flex-basis: 50%;
  height: 50vw;
  border: 1px solid black;
  box-sizing: border-box;
}

<div id="container">
  <div class="square">Britt</div>
  <div class="square">JOn</div>
  <div class="square">Devin</div>
  <div class="square">Brevin</div>
</div>

Answer 2

我认为为了获得方形div，你需要添加

width: 200px;
height: 200px;

到你的#container。您需要先将容器设置为方形。

CSS宽度和高度属性不起作用

2 个答案: