×
Ir ao conteúdo
  • Cadastre-se

CSS como colocar divs uma ao lado da outra, html e css js.


M.tech
Ir à solução Resolvido por Marcelo Calazans,

Posts recomendados

Olá, usando css html e js, precisei colocar dois buttons em divs separadas para poder chamar eles dentro do css. Porém fica um embaixo do outro, quero que fique um ao lado do outro, como faço?

Link para o comentário
Compartilhar em outros sites

Tem várias formas de se fazer isso, apenas com HTML e CSS, sem ter que apelar para o Java Script.

 

display: flex;
display: grid;


Conforme os exemplos abaixo:

https://codepen.io/chriscoyier/pen/bedKLV

https://codepen.io/robinrendle/pen/7fd26178982f9be68bc340cec074c38a


De certo ponto, dependendo na necessidade;
 

float: right;
float: left;


Poderiam fazer uma coisa semelhante.


Abaixo vou propor outra coisa (display: inline-block;), veja o código:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
.div-lado {
     display: inline-block;
} 
</style>

<div class="div-lado">  
     <p>(UM)</p>
</div>

<div class="div-lado">  
     <p>(DOIS)</p>
</div>

</body>
</html>

 

Sugiro que você pesquise um pouco mais, pois há várias maneiras se se fazer isso, estude e veja qual é a melhor para a sua necessidade.

 

Abraços.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

  • Moderador

@M.tech Não é o caso de usar o atributo inline-block?   

 

Exemplo:

<div>
   <button></button>
   <button></button>
</div>
button{
  display: inline-block;
}

 

https://jsfiddle.net/dife/4bLjc8yg/6/

  • Amei 1
Link para o comentário
Compartilhar em outros sites

okay...usei o 'float'...porém agora as divs não ficam no centro da tela embaixo do texto...nem mesmo usando "align items" "justify content" ....

Link para o comentário
Compartilhar em outros sites

  • Solução

@M.tech O float talvez não seja muito indicado para fazer o que você quer com os botões, no seu caso, o mais indicado mesmo é o display: inline-block;


Abaixo tem um exemplo de duas divs com float para você ver:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
.div_um { float: left; }
.div_dois {float: right; }
.texto { clear: both; }
</style>

<div class="div_um">
    <p>(UM)</p>
</div>

<div class="div_dois">
     <p>(DOIS)</p>
</div>

<div class="texto">
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

</body>
</html>

 

 Abraços.

  • Amei 1
Link para o comentário
Compartilhar em outros sites

@Marcelo Calazans muito obrigado, vou dar uma olhada. Abraços!

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Como se tornar um desenvolvedor full-stack

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!