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

M.tech · 3 de fevereiro de 2021

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?

Marcelo Calazans · 3 de fevereiro de 2021

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.

DiF · 3 de fevereiro de 2021

@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/

M.tech · 4 de fevereiro de 2021

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" ....

Marcelo Calazans · 4 de fevereiro de 2021

@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>