Comment faire pour aligner le texte sur la droite en utilisant le css quand dans un div avec les éléments de bloc

Je souhaite produire de la disposition suivante à l'intérieur d'un en-tête de la div sur ma page, à l'aide de CSS

+-----------+ 
+ + 
+ Image + texte du Titre du texte aligné à droite 
+ + 
+-----------+

J'ai du mal à aligner le texte sur la droite. Il conserve l'alignement immédiatement à droite et une ligne ci-dessous le texte du titre, à l'instar de ce

+-----------+ 
+ + 
+ Image + texte du Titre 
+ + Du texte aligné à droite 
+-----------+

C'est mon actuel de balisage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  <html>  
    <head>  
      <style type="text/css">  
        #header, #footer { padding: 0.3em 0; border-bottom: 1px solid; }  
        #header img   { display: inline;}  
        #header h1    { display: inline; margin: 0px; padding: 0px; 
                        vertical-align: 50%; position: left;}  
        #login-status { margin: 0px; padding: 0px; 
                        display: inline;text-align: right; position: right;}
        </style>

        <title>Models</title>            
      </head>  
      <body>  
        <div id="header">  
          <img alt="Logo" height="110" width="276" 
            src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />  
          <h1>Models</h1>  
          <p id="login-status">You are currently logged in as steve</p>  
        </div> <!-- end of header -->  
      </body>  
    </html>

J'avais prévu de la ligne de style pour ne pas provoquer un saut de ligne après l'élément h1, mais ce n'est pas le cas. Quelqu'un peut-il suggérer ce que je fais de mal?

OriginalL'auteur Steve Weet | 2009-03-28

css

13
```
#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; }  
    #header img   { float: left;}  
    #header h1    { float: left; margin: 0px; padding: 0px; }  
    #login-status { margin: 0px; padding: 0px; float: right; }
```
Il n'y a pas besoin d'un surplus de divs autour des éléments ou une compensation div quand flottante. J'ai utiliser la technique ci-dessus régulièrement pour faire exactement ce que vous essayez de faire. overflow:hidden; rend l'en-tête claire de la flotte, mais si il n'y a pas de largeur spécifiée, vous aurez besoin de zoom: 1; pour IE6. le zoom ne valide pas, mais il fonctionne parfaitement, et vous pouvez l'ajouter à un ie6 seul fichier css si besoin.

Merci Justin, qui fonctionne parfaitement. J'en étais arrivé à une autre solution en utilisant absolue posistioning à partir de la droite, mais le fonctionne pour moi.
C'est une belle solution élégante Justin... et il satisfait de Steve désir d'utiliser moins de marquer. Je l'aime!!!
Merveilleux. Je ne savais pas overflow:hidden serait de développer un élément de la flotte qu'il contient. Est le float: left vraiment nécessaire sur le img et h1 si? Il me semble qu'il ne l'est pas.

OriginalL'auteur

Vous aurez probablement à faire quelque chose comme ça...

<head>
    <style type="text/css">
        #header, #footer
        {
            padding: 0.3em 0;
            border-bottom: 1px solid;
        }
        #login-status
        {
            margin: 0px;
            padding: 0px;
            line-height: 110px;
            vertical-align: middle;
        }
    </style>
    <title>Models</title>
</head>
<body>
    <div id="header">
        <div style="float: left">
            <img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px;
                height: 110px" />
        </div>
        <div style="float: left; margin: 0px 8px 0px 8px; 
            line-height: 110px; vertical-align: middle;">
            <h1>Models</h1>
        </div>
        <div id="login-status" style="float: right;">
            You are currently logged in as steve
        </div>
        <div style="clear: both">
        </div>
    </div>
    <!-- end of header -->
</body>

Le "Clear" sera nécessaire quelque part dans l'ordre de nettoyer votre flottante, mais elle pourrait être appliquée à un autre balise div qui allait suivre votre tête au lieu d'être inclus dans l'en-tête.

Note... j'ai changé ce un peu pour obtenir le texte des zones qui sont à la droite de l'image pour être aligné verticalement "moyen". Vous pouvez changer le style à css, mais cela ne devrait obtenir ce que vous cherchez.

+1 Merci. Qui va certainement travailler. J'essaie d'éviter le supplément de balisage si je peux l'éviter.
Merci Steve, content que ma suggestion aidé... bonne chance avec ton projet!!!

OriginalL'auteur

img  float: left;  title text  float: left;    some text   float: right;

OriginalL'auteur

0

Utiliser "float:right;"

Je l'avais essayé mais il rend alors à l'extérieur de la div et après.

OriginalL'auteur

J'ai joué un peu avec un peu plus que le css à l'aide du zoom et non de la taille des flotteurs à la fois l'échec de la validation. J'ai aussi fait pas comme l'état de connexion montré à la verticale centrée.

La solution finale que je suis arrivé à (avec beaucoup de mur de soutènement de Bryan) est comme suit :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>  
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />  
      <style type="text/css">  
        #header, 
        #footer       { padding: 0.3em 0; border-bottom: 1px solid; 
                        height: 110px; }  
        #header img   { margin: 0px; padding: 0px; display: inline; }  
        #header h1    { line-height: 110px; vertical-align: middle; 
                        display: inline; position: absolute; left: 300px; 
                        margin: 0px; }  
        #login_status { font-size: 14px; margin: 0px; position: absolute; 
                        top: 100px; right: 10px; display: inline; 
                        text-align: right; }  
    </style>  
    <title>Models</title>     
  </head>  
  <body>  
    <div id="header">  
      <img alt="Logo" height="110" 
        src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />   
      <h1>Models</h1>  
      <span id="login_status">You are currently logged in as stevew</span>    
    </div> <!-- end of header -->  
  </body>  
</html>

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.