2

Eu quero que as duas divs com do degradê se alinhem Segue HTML e CSS:

* {
  box-sizing: border-box;
}

/* Sistema de colunas para celulares: */
[class*="col-"] {
    width: 100%;

  }


  /* Sistema de colunas para tablets: */
@media only screen and (min-width: 600px) {
    
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

  }
  

  /* Sistema de colunas para computadores: */
@media only screen and (min-width: 768px) {
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

  }

  /***********************************************/

  html {
    font-family: "Lucida Sans", sans-serif;
  }
  

   /* Imagens diferentes para tamanhos de páginas diferentes: */
/*body {
    background-image: url('');
  }
  
  /* Para quando a página for maior que 400px: */
  /*@media only screen and (min-width: 400px) {
    body {
      background-image: url('');
    }
  } */


  .fotoPessoal {

    background-size: contain;
    background-repeat: no-repeat;
    max-width: 100%;
    height: 100%;
    width: auto;
    background-image: url('../theimages/selfie.jpg');


  }

  .painelEsquerdo {

    width: 100%;
    height: 180vh;
    background:
      linear-gradient(65deg, rgba(0, 0, 0, 0.8), rgba(190, 190, 190, 1));

  }

  .painelDireito {

    width:100%;
    height:100vh;
    background:
      linear-gradient(-245deg, rgba(190, 190, 190, 1), rgba(0, 0, 0, 0.8));

  }

  .caixa1 {

    width: 100%;
    height: 100%;

  }
<html>

    <head>

        <meta charset="UTF-8">
        

        <link rel="stylesheet" href="thecss/thecascade.css">

        
    </head>



    <body>

        
        <div class="caixa1">
            <div class="col-3">

                <div class="painelEsquerdo">

                    <div class="fotoPessoal">

                    </div>

                </div>


            </div>

            <div class="col-9">

                <div class="painelDireito">



                </div>

            </div>

        </div>
        


    </body>


</html>

2
  • no caso em duas colunas ne?
    – user148170
    24/08/2019 às 1:25
  • Isso :) obrigado
    – Giovani DL
    24/08/2019 às 2:09

1 Resposta 1

2

Giovani para você trabalhar com esta formatação que deseja te aconselho utilizar a propriedade do CSS3: flexbox.

Altere sua class .caixa1 acrescentando isto: display:flex; ficando assim:

.caixa1 {

    width: 100%;
    height: 100%;
    display:flex;

  }

Dê uma lida aqui sobre flexbox.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .