Comment puis-je aligner deux balises div horizontalement avec CSS?

Question

Comment puis-je aligner horizontalement deux balises div avec CSS?

J'ai deux balises div. L'un contient du texte et l'autre contient une image. Ils sont côte à côte, et je veux que le texte de la première div soit aligné sur le bas de l'image. L'image est à la droite du texte.

Ou il devrait en être ainsi. Quand je joue avec différentes options CSS, les choses commencent à sauter.

Answer 1

Si je lis bien votre situation, vous avez une situation comme:

<div id="some_text"> 
    This is some text. 
</div> 
<div id="some_image"> 
    <img src="some_img.png" /> 
</div> 

Et vous voulez que le texte dans la première div pour commencer au bas de l'image dans la seconde div, comme:

       |-------------------| 
          |     | 
          |  Some Image | 
          |     | 
          |     | 
          |-------------------| 
      Some Text 

Depuis les deux divs sont indépendants les uns des autres, il n'y a aucun moyen de défaut de retirer ceci. Une chose à essayer est le réglage de la largeur des deux divs, flottant l'image div à droite, puis en utilisant la propriété clear pour vous assurer que la deuxième div est sous le premier div, comme:

#some_image { 
    width: 50%; 
    float: right; 
} 

#some_text { 
    width: 50%; 
    clear: right; 
} 

Je ne sais pas si cela fonctionne parfaitement, mais essayez-le.

Answer 2

Je ne sais pas pourquoi vous obtenez les résultats que vous obtenez. Sur quels navigateurs avez-vous testé cela? Par défaut, les éléments div sont au niveau du bloc, ce qui signifie qu'ils doivent s'empiler les uns sur les autres et s'étirer sur toute la longueur de l'écran. Vous ne devriez pas avoir à faire de mise en forme supplémentaire pour obtenir des éléments div à empiler. Le code ci-dessous vous donnera ce que vous voulez. Vous pouvez le faire:

<style type="text/css"> 
    .imageContainer { 
     width: yourWidth; 
     height: yourHeight; 
    } 

    .textCenter { 
     text-align: center; 
    } 
</style> 


<div class="textCenter imageContainer"> 
    <img src="yourSourceHere"> 
    <div> Your text Here </div> 
</div> 

Answer 3

Je ne sais pas si c'est ce que vous demandez, mais vous pouvez #some_image de position par rapport au fond de la div enveloppant les deux que vous avez mentionné. Dans le cas contraire, il suffit de mettre le texte et l'image dans le même div, comme:

<div id="some_div"> 
    This is some text. 
    <img src="some_img.png" /> 
</div> 

Si vous ne flottent pas l'image, le texte doit être aligné sur la ligne de fond de la div et, par conséquent, Alignés au bas de l'image.

Editer: Ouais je viens de réaliser que c'est 2 mois, désolé.