CSS Alinhar Duas Divs Lado a Lado

Fernando Cardoso de Melo · 27 de junho de 2023

Amigos desenvolvedores.

Talvez seja algo simples o que vou perguntar.

Duas divs que quero colocar uma do lado de outra. A da esquerda tem texto e a da direita uma imagem ou Vídeo.

Usei inline-grid.

Problema:

Fica lado a lado mas a da esquerda com o texto fica alinhada com a base da div da direita e preciso que ela fique alinhada com o topo.

Segue código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Div Lado a Lado</title>
<style type="text/css">
.div1 {
    display: inline-grid;
	width: 49%;
	background: #FF0004;
    text-align: left;
    }

    .div2 {
       	display: inline-grid;
		width: 30%;
		text-align: left;
        background: #FFFD00;
        
         }
	


    </style>
</head>

<body>
<div class="div1"><a href="https://www.admu.org.br">Quem Somos</a><a href="https://www.admu.org.br">Quem Somos</a></div>
<div class="div2"><p><img src="img/logo.png" width="100%" alt=""/></p></div>
</body>
</html>

O curioso é que se insiro texto na div direita ao invés da imagem fica como quero. Alguém ajuda?

washalbano · 27 de junho de 2023

Olá!
Talvez seja o caso de resolver com flex, veja:

<main>
  <div><a href="https://www.admu.org.br">Quem Somos</a><a href="https://www.admu.org.br">Quem Somos</a></div>
  <div>
    <p><img src="https://loremflickr.com/220/60" width="100%" alt="" /></p>
  </div>
</main>

main {
  display: flex;
  div {
    &:first-child {
      width: 49%;
      background: #ff0004;
      text-align: left;
    }
    &:last-child {
      width: 30%;
      text-align: left;
      background: #fffd00;
    }
  }
}

https://codepen.io/washalbano/pen/jOQyvbJ

Ou talvez dependa do tamanho da sua imagem

eXtremedlL · 2 de julho de 2023

@Fernando Cardoso de Melo criei a classe/div div-content para ser a div-pai e envolver as divs div1 e div2. e usei o grid para exibir o conteúdo e grid-template-columns para deixar a div1 e div2 lado a lado. também mexi algumas propriedades do código anterior para que ambas as divs mantem-se a mesma proproção

mais informações sobre o uso do grid, você pode acessar a documentação da mozilla

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Div Lado a Lado</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .div-cotent {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: flex-start;
      }
      .div1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
        background: #ff0004;
        height: 100%;
      }

      .div2 {
        display: grid;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="div-cotent">
      <div class="div1">
        <a href="https://www.admu.org.br">Quem Somos</a>
        <a href="https://www.admu.org.br">Quem Somos</a>
      </div>
      <div class="div2">
        <img
          src="https://i0.wp.com/ikpidepok.or.id/wp-content/uploads/2021/04/Lorem-Ipsum-alternatives.png?fit=750%2C480&ssl=1"
          width="100%"
          height="100%"
          alt=""
        />
      </div>
    </div>
  </body>
</html>

Fernando Cardoso de Melo · 3 de julho de 2023

Consegui usando assim o código:

.div2
{
    display: inline-grid;
    width: 80%;
    margin-right: 2%;
    margin-top: 0px;
    text-align: justify;
    line-height: 130%;
    color:#2E2E2E;
    font-family: Arial;
    font-size: 14pt;
}
.div1
{
    display: inline-grid;
    float: left;
    width: 15%;
    margin: auto auto auto 2%;
    line-height: 170%;
    text-align: left;
    font-family: Arial;
    font-size: 11pt;
    font-style: italic;
    font-weight: bold;
    color:#2E2E2E;
    padding-bottom: 10px;
    padding-top: 30px;
}