Aligner <div> éléments côte à côte

Question

Je sais que la question est assez simple, mais je ne peux pas la comprendre pendant toute ma vie. J'ai deux liens auxquels j'ai appliqué une image de fond. Voici à quoi cela ressemble actuellement (excuses pour l'ombre, juste un croquis approximatif d'un bouton):

Cependant, je veux que ces deux boutons soient côte à côte. Je ne peux pas vraiment comprendre ce qu'il faut faire avec l'alignement.

Voici le 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>

Voici le 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;
}

Answer 1

Appliquez float:left; à vos deux divs pour qu’ils se tiennent côte à côte.

Answer 2

Attention float: left… ????

… Il existe de nombreuses façons d’aligner des éléments côte à côte.

Vous trouverez ci-dessous les manières les plus courantes d’atteindre deux éléments côte à côte…

Démo: Voir/éditer tous les exemples ci-dessous sur Codepen

---

Styles de base pour tous les exemples ci-dessous…

Quelques styles CSS de base pour les éléments parent et child dans ces exemples:

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

---

En utilisant la solution float, vous pouvez affecter inopinément d’autres éléments. (Astuce: vous devrez peut-être utiliser un 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;
}

---

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;
}

---

Remarque : l'espace entre ces deux éléments enfants peut être supprimé en supprimant l'espace entre les balises div:

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;
}

---

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;
}

---

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;
}

---

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
}

---

Answer 3

rester simple

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>