-2

estou tentando posicionar lado a lado dois textareas que estão dentro de duas sections mas não estou conseguindo saber exatamente oq fazer. A minha ideia é que seja um projetinho responsivo.

body{
  padding:0px;
  margin:0px;
  display:grid;
   grid-template-areas:
    "header header header"
    "main main main"
    "footer footer footer";
}
header{
  background-color:blue;
  grid-area:header;
}


.principal{
  background-color:red;
  grid-area:main;
}

.rodape{
  grid-area:footer;
  background-color:green;
}

.titulo{
  background-color:purple;
  text-align:center;
}

.area1{
  margin:10px;
  background-color:yellow;
  width:350px;
}
.area2{
  margin:10px;
  background-color:blue;
  width:350px;
}

.botoes{
  display:flex;
}







  
<!DOCTYPE html>
<html lang="pt=br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>teste</title>
</head>
<body>
    <header class="cabecalho">logo</header>
  
  <main class="principal">
    
    <div class="titulo">
    <h1>esse é o titulo principal</h1>
    </div>
    
    <section class="area1">   
      <div>
        <textarea cols="10"rows="8" class="txt1">
        </textarea>
      </div>
      
     <div class="botoes">
        <button>botao</button>
        <button>botao</button>
    </div>
     </section>
    
    <section class="area2">
      <div>
        <textarea cols="20"rows="8" class="txt2"></textarea>
      </div>
      
      <div>
       <button>botao</button>
      </div>
    </section>
  </main>
  <footer class="rodape">rodape</footer>
</body>
</html>

0

2 Respostas 2

-3

Ao colocar o comando margin no CSS automaticamente está a pedir que exista um espaço entre as duas sections experimente retira-lo e no caso do ambiente responsivo não use px mas sim % depois dos valores de width.

-3

Resumidamente para a solução, você precisa adicionar um elemento mãe as suas duas sections, em seguidar posicionar elas através de display e flex no CSS:

body{
  padding:0px;
  margin:0px;
  display:grid;
   grid-template-areas:
    "header header header"
    "main main main"
    "footer footer footer";
}
header{
  background-color:blue;
  grid-area:header;
}


.principal{
  background-color:red;
  grid-area:main;
}

.rodape{
  grid-area:footer;
  background-color:green;
}

.titulo{
  background-color:purple;
  text-align:center;
}

.areas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.area1{
  margin:10px;
  background-color:yellow;
  width:350px;
}
.area2{
  margin:10px;
  background-color:blue;
  width:350px;
}

.botoes{
  display:flex;
}
<!DOCTYPE html>
<html lang="pt=br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>teste</title>
</head>
<body>
    <header class="cabecalho">logo</header>
  
  <main class="principal">
    
    <div class="titulo">
    <h1>esse é o titulo principal</h1>
    </div>
    <div class="areas">
      <section class="area1">   
        <div>
          <textarea cols="10"rows="8" class="txt1">
          </textarea>
        </div>

       <div class="botoes">
          <button>botao</button>
          <button>botao</button>
      </div>
       </section>

      <section class="area2">
        <div>
          <textarea cols="20"rows="8" class="txt2"></textarea>
        </div>

        <div>
         <button>botao</button>
        </div>
      </section>
    </div>
  </main>
  <footer class="rodape">rodape</footer>
</body>
</html>

Talvez o resultado acima na execução do stackoverflow esteja um em baixo do outro, mas é por conta da falta de espaço ao tentar colocar uma section ao lado da outra, isso é a responsividade do wrap em ação.

Explicação

HTML

Para isso, primeiro você deve adicionar um elemento mãe dessas sections com uma classe chamada "areas", pois ela irá controlar o posicionamento das sections, no caso do código acima eu coloquei uma <div class="areas">, ficando como o exemplo abaixo:

<div class="areas">
<section class="area1">...</section>
<section class="area2">...</section>
</div>

CSS

Para o css iremos utilizar o display: flex; para conseguirmos alinhar os elementos dentro da nossa <div> mãe, o flex-direction: row; é responsável por deixar as sections (area1 e area2) uma do lado da outra. O flex-wrap: wrap; permitirá a responsividade da página uma vez que não tiver mais espaço suficiente para ficar uma ao lado da outra, então sua <section class="area2"> irá descer.

.areas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row; 
  flex-wrap: wrap;
}

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 .