-2
divでMondrian作品を再作成しようとしていて、元の.jpg（codepen）から取り上げたpxディメンションを与えたときに機能しました。それを反応させるために、私はpxを幅と高さ全体の％に変換しましたが、divは表示されなくなりました（codepen）。私は高さでvhを実行し、幅に％を与えてみました（比率が同じで、縦方向にスケーリングするように）。 divが表示されない理由と、px-％またはvhの変換を行うときに注意すべき点を説明できますか？両方の場合においてpxディメンションを％/ vhに変更しました、divsが表示されません
HTML：PX寸法を有する
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="tophalf">
<div class="leftside">
<div class="square1"></div>
<div class="square2"></div>
</div>
<div class="rightside">
<div class="square3"></div>
</div>
</div>
<div class="bottomhalf">
<div class="square4"></div>
<div class="square5"></div>
<div class="bottomright">
<div class="square6"></div>
<div class="square7"></div>
</div>
</div>
</body>
CSS、作業：CSSの
body{
background-color: grey;
font-size: 0;
}
.tophalf{
}
.leftside{
border-right: solid black 14px;
display: inline-block;
}
.rightside{
display: inline-block;
}
.bottomhalf{
display: inline-block;
border-top: solid black 14px;
}
.square1{
height: 152px;
width: 108px;
border-bottom: solid black 31px;
background-color: white;
}
.square2{
height: 187px;
width: 108px;
background-color: white;
}
.square3{
background-color: red;
width: 389px;
height: 370px;
}
.square4{
background-color: blue;
width: 108px;
height: 128px;
display: inline-block;
}
.square5{
display: inline-block;
width: 335px;
height: 128px;
background-color: white;
border-left: solid black 14px;
}
.bottomright{
display: inline-block;
border-left: solid black 16px;
}
.square6 {
width: 38px;
height: 51px;
background-color: white;
border-bottom: solid black 23px;
}
.square7 {
background-color: yellow;
height: 54px;
width: 38px;
}
最後のバージョンは、VH中、％の幅、高さを示していないのdiv：
html, body{
background-color: grey;
font-size: 0;
height: 100vh;
width: 100vw;
}
.all{
height: 100%;
width: auto;
overflow: hidden;
display: block;
}
.leftside{
border-right: solid black 3%;
display: inline-block;
}
.rightside{
display: inline-block;
}
.bottomhalf{
display: inline-block;
border-top: solid black 3vh;
}
.square1{
height: 29.9vh;
width: 21%;
border-bottom: solid black 6vh;
background-color: white;
}
.square2{
height: 36.1vh;
width: 21%;
background-color: white;
}
.square3{
background-color: red;
width: 76%;
height: 72vh;
}
.square4{
background-color: blue;
width: 21%;
height: 25vh;
display: inline-block;
}
.square5{
display: inline-block;
width: 65.5%;
height: 25vh;
background-color: white;
border-left: solid black 3%;
}
.bottomright{
display: inline-block;
border-left: solid black 3%;
}
.square6 {
width: 7.5%;
height: 10vh;
background-color: white;
border-bottom: solid black 4.5vh;
}
.square7 {
background-color: yellow;
height: 10.5vh;
width: 7.5%;
}