Question

我试图用div重新创建蒙德里安片段，当我给它原始的.jpg（codepen）提升的px尺寸时它起作用了。为了使其响应，我将px转换为整个宽度和高度的％，但div最终没有显示（codepen）。我尝试在高度上做vh，并给出％到宽度（这样比例是相同的，只是垂直缩放）。你能解释为什么没有显示div，以及在进行px-％或vh转换时要注意什么？

两种情况下的HTML：

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

具有px维度的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;
}

最后一个版本的css，div没有显示，宽度为％，高度为vh：

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%;
}

Answer 1

你应该使用所有％＆＃39; s。我也将所有造型改为flexbox。它现在响应

    html, body{
   background-color: grey;
   height: 100%;
   width: 100%;
}

.all{
   height: 100%;
   width: auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   width: 25%;
}

.tophalf{
   display: flex;
   flex-direction: column;
   height: 75%;
   background-color: red;
   width: 100%;

}

.bottomhalf{
   height: 25%;
   width: 100%;
   background-color: blue;
   border-top: solid black 14px;
   display: flex;
   flex-direction: row;
}

.leftside{
   width: 25%;
   height: 100%;
   background-color: #FFF;
   border-right: solid black 14px;
   display: flex;
   flex-direction: column;
}

.square1{
   height: 50%;
   width: 100%;
   border-bottom: solid black 31px;   
}

.square2{
   height: 50%;
   width: 100%;
}

.square4{
   width: 25%;
   height: 100%;
}
.square5{
   width: 60%;
   height: 100%;
   background-color: white;
   border-left: solid black 14px;
}

.bottomright{
   width: 15%;
   height: 100%;
   display: flex;
   flex-direction: column;
   background-color: white;
   border-left: solid black 16px; 
}

.square6{
   height: 50%;
   width: 100%;
   border-bottom: solid black 23px;
  }

.square7 {
   background-color: yellow;
   height: 50%;
   width: 100%;
}

将px维度更改为％/ vh，不显示div

1 个答案: