Estoy tratando de hacer flotar dos divs con diferentes tamaños de fuente. No puedo encontrar una manera de alinear el texto en la misma línea de base. Aquí es lo que he estado intentando:Alinear verticalmente divs flotantes
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>
Si pones la derecha div flotaba antes de la div izquierda flotaba en el HTML y van a alinear verticalmente.
Como alternativa, puede hacer flotar ambos divs restantes, eso es perfectamente válido, y cómo se codifican la mayoría de los diseños CSS.
Ok, primero la forma pura de CSS. Usted puede obtener una alineación vertical a la parte inferior con relative+absolute positioning así:
<div id="header">
<div id="left">BIG</div>
<div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>
Usted puede tener algunos problemas con esto, al igual que el comportamiento IE6, así como cuestiones z-index con cosas como menús (la última vez que probé este mis menús apareció bajo el contenido absoluto).
Además, dependiendo de si todos los elementos deben estar completamente posicionados o no, es posible que deba comenzar a hacer cosas como especificar la altura del elemento que contiene explícitamente, lo que generalmente es indeseable. Idealmente, desearía que el contenedor se dimensione automáticamente para sus hijos.
El problema es que las líneas de base de las fuentes de diferentes tamaños no coincidirán y no sé de una forma "pura" de CSS para hacer esto.
Con mesas sin embargo, la solución es trivial :
<table id="header">
<tr>
<td id="left">BIG</td>
<td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>
Inténtelo y verá que funciona perfectamente.
La multitud anti-mesa gritará asesinato azul, pero lo anterior es la manera más simple y más compatible con el navegador (especialmente si se requiere soporte IE6) para hacer esto.
Ah, y siempre prefiero usar clases para incorporar estilos CSS.
Mayormente ídem. Prefiero definir una altura en el contenedor que recurrir a tablas, pero hago principalmente desarrollo de aplicaciones web donde todo el mal augurio ya está posicionado. No esperaría que IE6 tenga problemas con eso, a menos que haya un montón de otras cosas malas :) –
Si quieres alinearte con la línea de base de texto, no puedo ver cómo más puedes hacerlo que usar tablas. Las cosas dentro de un div son fundamentalmente independientes entre sí, y los tramos no se pueden alinear de cualquier manera. Usar tablas cuando las tablas son incorrectas es incorrecto, usar tablas cuando están en lo correcto es lo correcto. Sin embargo, usarlos cuando son lo único que funciona es perfectamente aceptable en mi libro. – ijw
Preferiría "alineación vertical: abajo" – asdfasdfads
¿Se refiere a la línea de base en el sentido tipográfico? (Es decir, cada línea de texto está nivelada con una línea correspondiente en la otra columna) Si ese es el caso, los tamaños de letra deben ser múltiplos entre sí, por ejemplo, 12 y 18 píxeles (1: 1.5).
Si quiere decir que los divs deben tener la misma altura, no hay una manera fácil de hacerlo. Puede establecer manualmente una altura (alto: 100px;), o usar javascript para ajustar uno como los otros cambios.
O, puede falsificar la misma altura encerrando los dos div en un contenedor, y luego aplicando un estilo de fondo al contenedor que imita el aspecto de las columnas, configurándolo para que se repita verticalmente. De esa forma, obtienes columnas falsas. Para una mirada en profundidad, vea esto classic A List Apart article.
¿Quisiste decir que tienes dos textos y los dos deben estar en la parte inferior de las columnas? (perdón, no puedo publicar una imagen todavía)
Una forma de hacerlo es utilizando el método de Faux Columns anterior.
La otra forma es configurar el texto en su propio contenedor dentro del texto. Luego, coloca ambos absolutamente en la parte inferior de las columnas ...aquí hay un largo fragmento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
.col { width:200px; float:left; }
.short { height:200px; background:#eee; margin-bottom:20px; }
.long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */ }
#container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}
#big, #small { position:absolute; bottom:0px; width:200px; }
#big { height:100px; background:red; }
#small { height:20px; background:green; right:0px; }
</style>
</head>
<body>
<div id="container">
<div class="col long">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</div>
<div id="big" >BIG</div>
<div id="small">small</div>
</div>
</body>
</html>
No tengo idea de lo que quiso decir, pero 18 no es un número entero múltiplo de 12 y, a la inversa, * cualquier cosa * es un múltiplo no entero de 12. – ijw
Algunos seriamente nigromancia con este comentario, pero creo que lo que quiso decir con eso es que necesitan compartir un factor común, que en este caso sería 6. – Isochronous
edición acaba de volver a leer las preguntas y vio una caja flotante necesita a la derecha ... así que el siguiente no funciona ... pero podría ser adaptable
En primer lugar, debe utilizar los intervalos en lugar de divs, ya que el contenido va a estar en línea para finalizar. No sé por qué, pero esto significa que sus elementos se comportarán un poco más amigables en todos los navegadores.
Una vez que hayas hecho esto, esto funciona un tratamiento, incluso en IE6 y 7:
#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}
<div id="header">
<span id="left">BIG</span>
<span id="right">SMALL</span>
</div>
+1, gracias - acabo de cambiar mis parámetros flotados a tramos de bloque en línea, y lo hace ¡de hecho trabajo! – halfer
Para ello, puede utilizar la línea de altura, pero que sólo funciona en los elementos en línea y si el texto no lo hace envolver.
<div id="header" style="overflow:hidden;">
<span id="left" style="font-size:40px;">BIG</span>
<span id="right" style="line-height:48px;">SMALL</span>
</div>
he cambiado el div-span. Si desea mantener div simplemente agregue display:inline a su estilo.
<div id="header" style="overflow:hidden;">
<div id="left" style="font-size:40px;display:inline;">BIG</div>
<div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>
Eso no les ayuda a hacer coincidir el emparejamiento en la línea de base, que es la pregunta (cometí el mismo error hasta que lo volví a leer). – cletus
¡Pensé lo mismo también! –