divs enfant s'étendant sur div parent

Question

Je veux placer deux images dans le bandeau supérieur. Mais la deuxième image montre en dehors de la div "bannière" parent div. J'ai essayé avec des tables, mais je n'ai pas obtenu les résultats. De plus, deux images ne doivent pas se coucher lorsque je redimensionne le navigateur. Quelle est la bonne façon de faire cela? L'one-way est de joindre les images dans Photoshop que je ne veux pas faire.

<div id="banner"> 
    <div><img src=".." alt="Utilities Logo" 
    height="105" width="406" /></div> 
    <div> 
    <img src=".." alt="!" 
    height="105" width="467"> 
    </div> 
    </div> 

Answer 1

Cela semble être le moyen le plus simple. Les images sont inline-block, donc elles s'aligneront bien (#banner ne devrait pas être plus petit que 406 + 467 cependant).

<div id="banner"> 
    <img src=".." alt="Utilities Logo" height="105" width="406" /><img src=".." alt="!" height="105" width="467"> 
</div> 

Une autre façon peut-être jouer avec la propriété float CSS, comme le suggère michele.

Si vous ne voulez pas vraiment de se replier sur Redimensionner du navigateur, vous devriez envisager de les fusionner dans PS parce que je ne vois pas vraiment une bonne raison pour eux d'être séparés. Ou vous pouvez donner à #banner un CSS min-width assez grand pour contenir les deux images.

Answer 2

Il suffit d'ajouter quelques numéros d'identification à la div de

<div id="banner"> 
     <div id="img1"> 
      <img src=".." alt="Utilities Logo" height="105" width="406" /> 
     </div id="img2"> 
     <div> 
      <img src=".." alt="!" height="105" width="467"> 
     </div> 
    </div> 

Et puis essayez le code CSS suivant

#img1 
{ 
    float : left; 
    width : 406px; 
} 

#img2 
{ 
    float : left; 
    width : 467px; 
} 

Cela devrait résoudre le problème

Answer 3

je ferais quelque chose comme ceci:

<div id="banner"> 
    <div id="image_1"> 
    </div> 
    <div id="image_2"> 
    </div> 
</div> 

#image_1 { height:105px; width:406px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; } 

#image_2 { height:105px; width:467px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; } 

Je voudrais également vous assurer que #banner <div> a au moins une largeur de 467px.

Vous n'avez pas été précis si vous voulez ces deux <divs> au-dessus de eachother. Si vous ne voulez pas qu'ils soient alignés horizontalement de gauche à droite comme ils le seront avec mon code ci-dessus. Il suffit de prendre le float:left; Assurez-vous qu'il ya une largeur minimum de 467px sur la #banner div and qui devrait le faire.

Answer 4

simple:

<style type="text/css"> 
    #banner { white-space: nowrap; } 
</style> 

<div id="banner"> 
    <img src="banner-1.png" width="406" height="105"> 
    <img src="banner-2.png" width="467" height="105"> 
</div>