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

127

Je sais que c'est une question assez simple, mais je ne peux pas la comprendre pour la vie de moi. J'ai deux liens auxquels j'ai appliqué une image d'arrière-plan. Voici à quoi il ressemble actuellement (excuses pour l'ombre, juste une esquisse approximative d'un bouton):

entrez la description de l'image ici

Cependant, je veux que ces deux boutons soient côte à côte. Je ne peux pas vraiment comprendre ce qui doit être fait 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;
}
css html alignment sudo rm -rf
la source
5
Le premier qui me vient à l'esprit en lisant simplement le titre estfloat:left;
JCOC611
2
@ JCOC611: Appliquer float:left;aux deux divs l'a fait parfaitement. Pouvez-vous poster votre commentaire comme réponse? Merci!
sudo rm -rf
1
Et le second est display: inline-block;mais il est moins bien supporté ...
JV
1
float: laissé à l'intérieur d'un conteneur fonctionnerait, mais j'essaierais d'utiliser deux balises <span> au lieu de <div> s pour les boutons.
shiftycow
Comme déjà mentionné, ajout de float: left; à #buyButton et #galleryButton, puis ajoutez un autre élément avec clear: both; pour effacer le flottement. Pourquoi utiliser des divs (éléments de bloc) pour envelopper <a>?
ludesign

Réponses:

154

Appliquer float:left;à vos deux divs devrait les faire se tenir côte à côte.

JCOC611
la source
Est-ce que je me trompe ou est-ce clear:both;qu'il faut y aller quelque part? Je n'ai jamais été le savant CSS mais cela semble typique quand je vois des flotteurs pour voir aussi des clears.
Brad Christie
4
clear:bothfera exactement le contraire. "Les éléments situés après l'élément flottant circuleront autour de lui. Pour éviter cela, utilisez la propriété clear."
JCOC611
@ JCOC611: Ah, si clair suit généralement lorsque vous voulez une capacité de flottement momentanée? Logique. Merci pour la leçon. ;-)
Brad Christie
7
Juste pour être "clair", (horrible, je sais), vous auriez besoin d'utiliser <br style="clear: both;" />si vous aviez un troisième div que vous vouliez sous les deux qui étaient alignés.
Tass
3
@Tass, vous n'avez besoin que de votre troisième div comme ceci: <div style="clear: both;">...</div>(pas de br requis)
intrepidis
137

Attention float: left… 🤔

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

Vous trouverez ci-dessous les moyens les plus courants de réaliser deux éléments côte à côte…

Démo: affichez / modifiez tous les exemples ci-dessous sur Codepen

Styles de base pour tous les exemples ci-dessous…

Quelques styles CSS de base pour parentet childéléments dans ces exemples:

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

float: gauche

L'utilisation de la floatsolution peut avoir des effets involontaires sur 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;
}

affichage: bloc en ligne

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:

affichage: bloc en ligne (sans espace)

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

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

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

affichage: grille

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
la source
2
Ouais, mais j'ai entendu dire que l'utilisation inline-blockavait des problèmes de compatibilité. En outre, un avantage à utiliser cela plus float?
sudo rm -rf
1
Oui, inline-blockc'est plus récent, donc vos navigateurs cibles peuvent ne pas encore le prendre en charge (bien qu'il existe de nombreuses propriétés spécifiques au navigateur et aussi des solutions de contournement pour cela). L'avantage est que l'élément contenant encapsulera les éléments; avec floatvous devrez ajouter css à l'élément parent.
Beau Smith
12

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>
Miguel Rão Vieira
la source