CSS寬度和高度屬性不起作用

我想讓我的div將整個窗口均勻地切割成四個均勻的正方形。CSS寬度和高度屬性不起作用

我有每個格的寬度和高度屬性設置爲50vh而在一個容器與display: flex和flex-wrap: wrap。

但是顯示的是四個矩形的div，而不是正方形的div。

我試着將它改爲50％，但沒有幫助。這裏是我的代碼：

#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>

來源

2016-12-29 Jonathan Reiser

[It does work]（https://jsfiddle.net/rp3qsv9t/）。你在說什麼？ – pol

如果您想將窗口分成四個均勻的正方形，則需要窗口爲正方形。任何時候調整窗口大小，它不再是一個完美的正方形，四個方框不能保持正方形，除非它們不再覆蓋整個窗口。 –

你能告訴我什麼不適用於給予的答案，所以我可以調整並且接受嗎？ – LGSon

這是你在找什麼？

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>

來源

2016-12-29 20:57:31 LGSon

我認爲，爲了得到多div的，你需要

width: 200px; 
height: 200px;

添加到您的#container。您需要首先將容器設置爲方形。

來源

2016-12-29 21:07:20 Qiong

CSS寬度和高度屬性不起作用

回答

相關問題