Как добавить отступы на двух DIVS, используя VH и VW, которые заполняют экран? - PullRequest
Новая
       51

Как добавить отступы на двух DIVS, используя VH и VW, которые заполняют экран?

0 голосов
/ 17 апреля 2020

Здравствуйте, у меня есть два столбца, охватывающих всю страницу. Я хотел бы добавить некоторые отступы, чтобы мой текст хорошо помещался в середине каждого столбца сверху, снизу, слева, справа. Я попытался использовать обертки и настроить ширину 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>

1 Ответ

0 голосов
/ 17 апреля 2020

Попробуйте добавить 

display: flex;
align-items: center;

к вашим классам .left и .right.

Затем можно по-прежнему использовать верхний и нижний отступы для предотвращения прилипания текста к верхней части элемента. на меньших экранах.

Я бы также использовал min-height: 100vh вместо height: 100vh, чтобы все работало хорошо на меньших (менее высоких) экранах.

...