Placer deux images dans les coins supérieurs de la page Web sans chevauchement

Question

Je dois placer deux images dans les coins supérieur gauche et supérieur droit d'une page Web, avec un espace vide entre elles qui consommerait l'espace disponible, c'est-à-dire si le Le navigateur affichant la page est redimensionné, les deux images resteront dans les coins tant que la largeur de la fenêtre du navigateur sera suffisante pour les afficher toutes les deux. Si le navigateur est ensuite redimensionné en dessous de cette largeur, une barre de défilement horizontale devrait apparaître. L'exigence de base est que les deux images ne doivent jamais se chevaucher, ni être rendues les unes au-dessous des autres.

Pour illustrer où je suis maintenant, voici un extrait de HTML vers le bas dépouillé:

<div class="header"> 
    <img src="left.png"> 
    <img style="float: right;" src="right.png"> 
</div> 

Cela suffit pour placer les images à la bonne position, mais malheureusement ils apparaissent ci-dessous l'autre si le navigateur La fenêtre est redimensionnée de sorte que sa largeur soit inférieure à la somme des largeurs des deux images.

Une solution basée sur CSS est préférable, bien sûr; J'éviterais d'utiliser l'élément <table> si possible.

Answer 1

Connaissez-vous la taille des images? Vous pourriez être en mesure de faire quelque chose comme ...

<div class="header"> 
    <img id="left"> 
    <img id="right"> 
</div> 

#header 
{ 
    position:relative; 
    min-width: 200px; 
} 

#left 
{ 
    position:absolute; 
    width: 100px; 
    top: 0; 
    left: 0; 
} 

#right 
{ 
    position:absolute; 
    width: 100px;  
    top: 0; 
    right: 0; 
} 

Je ne l'ai pas testé, mais du haut de ma tête quelque chose comme ça devrait fonctionner ok.

Answer 2

Vous pouvez utiliser du HTML marquer comme:

<div class = "header"> 
     <div class = "leftimage"><img src="left.png"></div> 
     <div class = "centerspace"></div> 
     <div class = "rightimage"><img src="right.png"></div> 
    </div> 

puis utilisez les classes suivantes pour le style:

<style> 
.leftimage{ 
float:left; 
} 
.centerspace{ 
float:left; 
} 
.rightimage{ 
float:right; 
} 
</style>