Come posso allineare il testo a destra usando css quando in un div con elementi di blocco

desidero produrre il seguente layout all'interno di un div colpo di testa sulla mia pagina, usando CSS soloCome posso allineare il testo a destra usando css quando in un div con elementi di blocco

 
+-----------+ 
+   + 
+ Image + Title text       Some text aligned on the right 
+   + 
+-----------+

Ho problemi allineando il testo a destra. Continua ad allineare immediatamente a destra e una riga sotto il testo del titolo, come questo

 
+-----------+ 
+   + 
+ Image + Title text       
+   +   Some text aligned on the right 
+-----------+

Questo è il mio attuale markup.

<!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>

mi aspettavo lo stile inline per non causare un'interruzione di linea dopo l'elemento h1, ma questo non è il caso. Qualcuno può suggerire cosa sto facendo male?

fonte

2009-03-28 Steve Weet

#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; }

Non c'è bisogno di div extra intorno agli elementi o di un div di compensazione quando si naviga. Uso regolarmente la tecnica sopra per fare esattamente quello che stai cercando di fare. overflow: hidden; rende l'intestazione libera i float, ma se non è specificata la larghezza è necessario zoom: 1; per IE6. lo zoom non è valido, ma funziona perfettamente e puoi aggiungerlo a un file ie6 solo css se necessario.

fonte

2009-03-28 13:59:30

Grazie Justin, funziona perfettamente. Ero arrivato a un'altra soluzione usando il posistioning assoluto da destra ma il lavoro per me. –

Questa è una bella soluzione elegante Justin ... e soddisfa il desiderio di Steve di usare meno markup. Mi piace!!! –

Meraviglioso. Non sapevo che 'overflow: hidden' avrebbe espanso un elemento per i float che contiene. Il 'float: left' è davvero richiesto su' img' e 'h1' però? Sembra che non lo sia. –

Utilizzare "float: right;"

fonte

2009-03-28 12:28:04 Albert

avevo provato che ma rende quindi al di fuori del div e dopo di esso. –

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

fonte

2009-03-28 12:34:42

è molto probabile che hanno a che fare qualcosa di simile ...

<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>

Il "Clear" saranno necessari da qualche parte, al fine di cancellare il tuo galleggiante, ma potrebbe essere applicato ad un altro div tag che seguirebbe la tua intestazione invece di essere inclusa nell'intestazione.

Nota ... Ho modificato un po 'questo aspetto per far sì che le aree di testo a destra dell'immagine siano allineate verticalmente "al centro". È possibile modificare lo stile per essere basato su CSS, ma questo dovrebbe ottenere ciò che stavi cercando.

fonte

2009-03-28 12:37:23

+1 Grazie. Certamente funzionerà. Sto cercando di evitare il markup extra se posso evitarlo. –

Grazie Steve, felice il mio suggerimento ha aiutato ... buona fortuna con il tuo progetto !!! –

Mi sono divertito un po 'di più in quanto il css che utilizzava i galleggianti di zoom e non di dimensioni ha fallito la convalida. Inoltre, non mi piace che lo stato di accesso sia visualizzato verticalmente centrato.

La soluzione finale che sono arrivato a (con molta cribbing da Bryan) è il seguente: -

<!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>

fonte

2009-03-28 19:14:47

Come posso allineare il testo a destra usando css quando in un div con elementi di blocco

risposta

Problemi correlati