Question

您好，我在页面上有两列。我想添加一些填充，以便我的文本很好地适合每一列top，bottom，left，right的中间。我尝试使用包装器并调整文本所在的div宽度，但是我必须做错了什么。这是我第一次尝试VH和VW。早些时候，我可以用它来做我想做的事情，但是经过几次刷新后，正确的div列将下降，次数或保持在原位。任何帮助将非常感激。

body{
background-color: rgb(0, 0, 0);

overflow-x: hidden;

}

*, html {
    margin: 0 !important;
    
}








.left{
    background-color: rgb(88, 12, 12);
    height:100vh;
    width:45vw;    
    font-size: 1em;
    color: rgb(160, 160, 160);
    float:right;

        }      
          



  .leftw{
    background-color: rgb(88, 12, 12);
    height:100vh;
    width:50vw;   
    font-size: 1em;
    color: rgb(160, 160, 160);
    float: left;

        }   
        
        
   



      
  .right{
    background-color: rgb(54, 0, 0);
    height:100vh;
    width:45vw;
    float: left;
    color: rgb(160, 160, 160);
        }      
      



        .rightw{
            background-color: rgb(54, 0, 0);
            height:100vh;
            width:50vw;
            z-index:2;
            float: right;
            color: rgb(160, 160, 160);
        
                }      
                



        
        @media only screen and (max-width: 700px) {
        
        }

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="stickynav.js"></script>







    <div class="leftw">
    <div class="left">
      
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quia sunt soluta eaque ex nam iste aperiam. Omnis nesciunt eos magnam dolorem rem saepe dignissimos, distinctio autem maxime, earum aut?
</div></div>



<div class="rightw">   
<div class="right">
      
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus quibusdam ratione quisquam molestiae necessitatibus, magnam laboriosam consequuntur ipsam minima alias aliquid eaque animi asperiores libero minus consectetur, temporibus quia hic?
</div></div>


</body>
</html>

Answer 1

尝试添加

display: flex;
align-items: center;

在您的.left和.right类中。

然后，您仍然可以使用顶部和底部填充，以防止文本在较小的屏幕上粘贴到元素的顶部。

我也将使用min-height: 100vh而不是height: 100vh，以便在较小的屏幕（不那么高的屏幕）上一切仍然正常。

如何使用填充整个屏幕的VH和VW在两个DIVS上添加填充？

1 个答案: