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

【问题标题】：How do I add padding on two DIVS using VH and VW that fill up the screen?如何使用填充屏幕的 VH 和 VW 在两个 DIVS 上添加填充？
【发布时间】：2020-07-30 17:17:03
【问题描述】：

您好，所以我在页面上有两列。我想添加一些填充，以便我的文本很好地适合每列 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>

【问题讨论】：

标签： html css margins adjustment border-spacing

【解决方案1】：

尝试添加

display: flex;
align-items: center;

在您的 .left 和 .right 类上。

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

我还会使用min-height: 100vh 而不是height: 100vh，这样在更小（不太高）的屏幕上仍然可以正常运行。

【讨论】：

使所有文本居中位于页面中心。我希望文本居中在 div 的顶部并带有一些填充。左上和右上。 -
好的，所以我添加了顶部中心并修复了它，但文本仍然与一侧对齐。我会再搞砸一些。谢谢。