有一个灰色方块,
用于放置 4 个小方块。有一个黑色方块,在黑色方块的每边中心将有 4 个小方块。
对于普通网络,我可以通过计算宽度来完成
但是我应该如何在 react native 中执行它,其中 calc(100% - 20) 在那里不起作用
请检查codepen中的代码:Codepen
索引.html
<!DOCTYPE html>
<head>
<title>squares in square</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='container'>
<div class='invisiblesquare'>
<div class='bigsquare'></div>
<div class='col1'>
<div class="smallsquare"></div>
</div>
<div class='col2'>
<div class="smallsquare"></div>
<div class="smallsquare"></div>
</div>
<div class='col3'>
<div class="smallsquare"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
样式文件
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.invisiblesquare{
position: relative;
height: 20%;
width:20%;
border: 1px …Run Code Online (Sandbox Code Playgroud)