Alinhar elementos <div> lado a lado

127

Sei que essa é uma pergunta bastante simples, mas não consigo descobrir isso pela vida toda. Eu tenho dois links nos quais apliquei uma imagem de plano de fundo. Aqui está a aparência atual (desculpas pela sombra, apenas um esboço aproximado de um botão):

insira a descrição da imagem aqui

No entanto, quero que esses dois botões fiquem lado a lado. Eu realmente não consigo descobrir o que precisa ser feito com o alinhamento.

Aqui está o HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

Aqui está o CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
css html alignment sudo rm -rf
fonte
5
O primeiro que vem à mente com a simples leitura do título éfloat:left;
JCOC611 08/02/11
2
@ JCOC611: A aplicação float:left;de ambos os divs fez perfeitamente. Você pode postar seu comentário como resposta? Obrigado!
Sudo rm -rf
1
E o segundo é display: inline-block;, mas é menos bem suportado ...
JV
1
float: deixado dentro de um contêiner funcionaria, mas eu tentaria usar duas tags <span> em vez de <div> s para os botões.
Shiftycow
Como já mencionado, adicionando float: left; para #buyButton e #galleryButton, adicione outro elemento com clear: both; para limpar o flutuante. Por que usar divs (elementos de bloco) para quebrar <a>?
Ludesign

Respostas:

154

Aplicar float:left;a ambos os divs deve fazê-los ficar lado a lado.

JCOC611
fonte
Estou enganado, ou é clear:both;necessário entrar lá em algum lugar? Eu nunca fui o especialista em CSS, mas parece típico quando vejo carros alegóricos também.
Brad Christie
4
clear:bothfará exatamente o oposto. "Os elementos após o elemento flutuante fluirão em torno dele. Para evitar isso, use a propriedade clear."
JCOC611
@ JCOC611: Ah, tão claro geralmente segue quando você quer uma capacidade momentânea de flutuação? Faz sentido. Obrigado pela lição. ;-)
Brad Christie
7
Apenas para ser "claro" (horrível, eu sei), você precisaria usar <br style="clear: both;" />se tivesse um terceiro div que desejasse abaixo dos dois que estavam alinhados.
Tass
3
@Tass você só precisa ter o seu terceiro div como este: <div style="clear: both;">...</div>(sem br obrigatório)
intrepidis
136

Cuidado float: left… 🤔

… Existem várias maneiras de alinhar elementos lado a lado.

Abaixo estão as formas mais comuns de obter dois elementos lado a lado…

Demonstração: veja / edite todos os exemplos abaixo no Codepen

Estilos básicos para todos os exemplos abaixo…

Alguns estilos básicos de css parente childelementos nestes exemplos:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

flutuar: esquerda

Usando a floatsolução, meus efeitos não intencionais foram causados ​​a outros elementos. (Dica: pode ser necessário usar um clearfix .)

html

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

css

.float-left-child {
  float: left;
}

display: bloco embutido

html

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

Nota : o espaço entre esses dois elementos filhos pode ser removido, removendo o espaço entre as tags div:

display: bloco embutido (sem espaço)

html

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

display: flex

html

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

exibição: inline-flex

html

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

display: grid

html

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}
Beau Smith
fonte
2
Sim, mas ouvi dizer que o uso inline-blocktem alguns problemas de compatibilidade. Além disso, alguma vantagem em usar isso de novo float?
Sudo rm -rf
1
Sim, inline-blocké mais recente, portanto, seus navegadores de targe talvez ainda não o suportem (embora existam muitas propriedades específicas do navegador e também soluções alternativas para isso). A vantagem é que o elemento que contém irá envolver os elementos; com floatvocê terá que adicionar css ao elemento pai.
Beau Smith
12

mantenha simples

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
Miguel Rão Vieira
fonte