Divs, flotteur et aligner, ont besoin d'aide

Question

je ce cauchemar de code,

<div style="height:46px;"> 
    <div style="text-align:left;float:left;"> 
     <img alt="Document Logo" src="Images/img1.gif"></img> 
    </div> 
    <div style="text-align:left;float:left;margin-top:5px;margin-left:13px;"> 
     <font size="4"> 
     <b>title (needs to be align to the left,next to img1)</b> 
     </font> 
    </div> 
    <div style="text-align:right;float:right;vertical-align:top;"> 
     <img alt="Logo" src="Images/img.jpg"/> 
    </div> 
    </div> 

img1 et titre doit être aligner à gauche et img2 doit être aligner à droite, mais quand je remets à la côte La fenêtre img2 passe sous le titre.

J'ai besoin de tous pour rester dans une ligne.

Quelqu'un peut-il donner un coup de main?

Merci d'avance.

Answer 1

Une autre solution consiste à utiliser le positionnement absolu à la place des flotteurs. Comme si:

<div style="position:relative; height:46px;"> 
    <div style="position:absolute; top:0; left:0; width:50px"> 
     <img alt="Document Logo" src="Images/img1.gif" width="50"></img> 
    </div> 
    <div style="position:absolute; top:5px; left:63px;"> 
     <font size="4"> 
     <b>title (needs to be align to the left,next to img1)</b> 
     </font> 
    </div> 
    <div style="position:absolute; top:0; right:0;"> 
     <img alt="Logo" src="Images/img.jpg"/> 
    </div> 
</div> 

choses à ne pas sur le code ci-dessus:

1. Assurez-vous que la première div a une largeur de la même taille que l'image dans.
2. La deuxième div aurait une "gauche" de: largeur de la première div + 13 (votre marge gauche)
3. La deuxième div a un sommet de 5 (votre margin-top)
4. Vous pourriez obtenir un un peu plus de fantaisie en spécifiant un "droit" sur le second div. Cela permettrait de s'assurer que le titre et la 3ème div/image ne se chevauchent jamais.
5. Je ai laissé les styles en ligne pour la brièveté, mais s'il vous plaît les rendre externes (via des classes ou des ID)
6. Débarrassez-vous de l'étiquette FONT entièrement si vous le pouvez.

Answer 2

essayer d'ajouter min-largeur à la plus à l'extérieur div et overflow: hidden

Answer 3

Essayer de mettre un attribut de CSS largeur ou min-largeur sur le dessus contenant div comme:

où le 300 est remplacé par la largeur combinée des images.

Answer 4

Vous devez placer une largeur minimale sur le conteneur le plus à l'extérieur, en réglant la plus petite taille possible.

<div style="height:46px; min-width: 200px"> 
    <div style="text-align:left;float:left;"> 
     <img alt="Document Logo" src="Images/img1.gif"></img> 
    </div> 
    <div style="text-align:left;float:left;margin-top:5px;margin-left:13px;"> 
     <font size="4"> 
      <b>title (needs to be align to the left,next to img1)</b> 
     </font> 
    </div> 
    <div style="text-align:right;float:right;vertical-align:top;"> 
     <img alt="Logo" src="Images/img.jpg"/> 
    </div> 

Answer 5

Mettre text-align:left sur la div externe, remplacez le deuxième et le troisième div intérieure, puis se débarrasser du monstre <div><font><b></b></font></div> inutile, en le remplaçant par le sémantiquement correct et beaucoup plus courte <h1></h1>:

<div style="height:46px;text-align:left"> 
    <div style="text-align:left;float:left;"> 
     <img alt="Document Logo" src="Images/img1.gif"></img> 
    </div> 
    <div style="text-align:right;float:right;vertical-align:top;"> 
     <img alt="Logo" src="Images/img.jpg"/> 
    </div> 
    <h1>title (will be aligned to the left, next to img1)</h1> 
</div> 

Vous pouvez toujours appliquer les marges et les paddings au h1 comme bon vous semble.

Answer 6

vous pouvez créer deux conteneurs et divs flotter un gauche et un droit