[英]CSS width and height property is not working
I am trying to get my divs to cut the entire window evenly into four even squares. 我正在尝试让我的div将整个窗口平均切成四个均匀的正方形。
I have the width and height property of each div set to 50vh
while in a container with display: flex
and flex-wrap: wrap
. 在具有
display: flex
和flex-wrap: wrap
的容器中,我将每个div的width和height属性设置为50vh
。
But what is being displayed is four rectangular divs, not square divs at all. 但是显示的是四个矩形div,而不是正方形div。
I tried changing it to 50% but that did not help. 我尝试将其更改为50%,但这没有帮助。 Here is my code:
这是我的代码:
#container { display: flex; flex-wrap: wrap; } .square { height: 50vh; width: 50vh; border: 1px solid black; }
<div id="container"> <div class="square">Britt</div> <div class="square">JOn</div> <div class="square">Devin</div> <div class="square">Brevin</div> </div>
Is this what you are looking for? 这是你想要的?
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>
I think in order to get square divs, you need to add 我认为为了获得方形div,您需要添加
width: 200px;
height: 200px;
to your #container. 给您的#容器。 You need to set the container as square first.
您需要先将容器设置为正方形。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.