Question

这就是我的HTML / CSS输出。 https://www.dropbox.com/sh/pcrjtmg6gjv2yc7/AAAw7GA8G-CTDFjOMqIUdqS_a?dl=0

这就是我迄今为止所做的。

现在显示搜索结果的div正在给我带来麻烦。

我正在学习CSS并想到使用vh和vw。

所以我继续这样做：

psd文件的尺寸为1100 * 1125

所以一个vh = 11.25 和一个vw = 11

我使用％age模型设计了外部设计。然后对于结果div，我测量第一个的高度为125像素。转换它，125/11 = 11.11vh

等等。

但最终结果非常糟糕!!所有东西都很少出现。我明白它会缩小到我的768px高度，但它仍然看起来非常小。

请告诉我我的做法有什么问题。

<html>   
<head>
   <link rel="stylesheet" href="assets/main.css">
</head>
<body>
   <div class="sidebar">
      </div>
        <div class="box">
         <p>35 search results for "Preview"</p>
         <input type="text">

         <input type="checkbox"  id="checkboxOneInput"><label for="checkboxOneInput">Todos</label>
         <input type="checkbox"><label>Discussions</label>
         <input type="checkbox"><label>Files</label>
         <input type="checkbox"><label>Progress</label>
         <input type="checkbox"><label>TeamMembers</label>    
         <div class="display">        
            <div class="inner_display image">    
               <div class="image_one">
                  <img src="assets/images/bluei.png">
                  <p>17 July</p></div>    
                  <div class="image_two"><img src="assets/images/xlsx.png"></div>    
                  <div class="image_three">
                     <p>preview.timeline_v1.jpg</p>
                     <p>Attached to the comment timeline_wireframes by Bharat</p>
                     <p>DOWNLOAD</p>
                     <p>Download</p>
                  </div>
               </div>
            </div>
         </div>
</body>
</html>

CSS

.sidebar {
   width:9.09%;
   height:100%;
   background:black;
   margin:0;
   position:fixed;
}    

.box {
   float:right;
   box-sizing: border-box;
   width:90.91%;
   height:100%;
   background:#D3D3D3;
   display:inline-block;
   vertical-align:top;
   padding-left:2.5%;
   padding-right:2.5%;    
   overflow:auto;
}

.box p {    
   margin:0;
   height:4.44%;    
}

.box input[type=text] {    
   width:100%;
   height:4.44%;
   margin-top:1.77%;
   margin-bottom:0.88%;
}

.display {
   margin-top:2.66%;
   padding-left:2.72vw;
   margin-bottom:2.5%;
   border:solid;
   border-width:thin;
   background:white;    
}

.inner_display {
   box-sizing: border-box;
}

.image {
   height:11.11vh;    
}

.image_one  {
   width:5.45vw;    
   margin-top:1.77vh;
   margin-bottom:1.77vh;    
   display:inline-block;
   vertical-align:top;
}

.image_one img {
   width:3.81vw;
   height:3.11vh;
}

.image_two {
   width:5.45vw;    
   margin-top:1.77vh;
   margin-bottom:1.77vh;    
   display:inline-block;
   vertical-align:top;       
}

.image_two img {
   height:3.55vh;
   width:3.63vw;    
}

.image_three {
   margin-top:1.77vh;
   margin-bottom:1.77vh;    
   display:inline-block;
   vertical-align:top;    
   font-size:1.6vh;
   line-height:0.5vh;    
}

vh和vw不能渲染小尺寸/错误

0 个答案: