¿Cómo alinear el texto a la derecha usando css cuando en un div con elementos de bloque

que deseo para producir la siguiente distribución dentro de un div de cabecera en mi página, el uso de CSS solamente¿Cómo alinear el texto a la derecha usando css cuando en un div con elementos de bloque

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

Tengo problemas para alinear el texto a la derecha. Se continúa alineando inmediatamente a la derecha y una línea por debajo del texto del título, como este

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

Ésta es mi marcación actual.

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

lo que esperaba el estilo en línea para no provocar un salto de línea después del elemento h1 pero este no es el caso. ¿Alguien puede sugerir lo que estoy haciendo mal?

Fuente

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

No hay necesidad de divs adicionales alrededor de los elementos o un div de limpieza al flotar. Uso la técnica anterior regularmente para hacer exactamente lo que estás tratando de hacer. desbordamiento: oculto; hace que el encabezado limpie los flotantes, pero si no se especifica el ancho, necesitará el zoom: 1; para IE6. El zoom no valida, pero funciona sin problemas, y puede agregarlo a un archivo css ie6 solo si es necesario.

Fuente

2009-03-28 13:59:30

Gracias Justin, eso funciona a la perfección. Había llegado a otra solución usando el posicionamiento absoluto desde la derecha pero el trabajo para mí. –

Esa es una buena solución elegante Justin ... y satisface el deseo de Steve de usar menos marcas. ¡¡¡Me gusta!!! –

Maravilloso. No sabía 'overflow: hidden' expandiría un elemento a los flotantes que contiene. Sin embargo, ¿es realmente necesario el 'float: left' en' img' y 'h1'? Parece que no lo es. –

Usar "flotador: derecho;"

Fuente

2009-03-28 12:28:04 Albert

Había intentado eso, pero entonces renders fuera del div y después de ella. –

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

Fuente

2009-03-28 12:34:42

lo más probable es que tenga que hacer algo como esto ...

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

El "Borrar" se necesitará algún lugar con el fin de limpiar su flota, pero se podría aplicar a otro div etiqueta que seguiría su encabezado en lugar de incluirse en el encabezado.

Nota ... Cambié esto un poco para que las áreas de texto que están a la derecha de la imagen se alineen verticalmente en "medio". Puede cambiar el estilo para que esté basado en CSS, pero esto debería lograr lo que estaba buscando.

Fuente

2009-03-28 12:37:23

+1 Gracias. Eso ciertamente funcionará Estoy tratando de evitar el marcado adicional si puedo evitarlo. –

Gracias Steve, me alegro de mi sugerencia ayudó ... buena suerte con su proyecto! –

He jugado con esto un poco más ya que el CSS que usa el zoom y los flotadores no dimensionados no han validado. Tampoco me gusta que el estado de inicio de sesión se muestre centrado verticalmente.

La solución final que he llegado al (con mucha apuntalamiento de Bryan) es el siguiente: -

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

Fuente

2009-03-28 19:14:47

¿Cómo alinear el texto a la derecha usando css cuando en un div con elementos de bloque

Respuesta

Cuestiones relacionadas