css - texto - Alinear verticalmente divs flotantes
centrar verticalmente css flex (5)
Intento flotar dos divs con diferentes tamaños de letra. No puedo encontrar una manera de alinear el texto en la misma línea de base. Esto es lo que he estado intentando:
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>
¿Te refieres 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 bien, puede falsificar la misma altura al encerrar los dos div en un contenedor y luego aplicar 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 profunda, mira este artículo clásico de A List Apart .
¿Quiso decir que tiene dos textos y ambos deben estar en la parte inferior de las columnas? (lo siento, todavía no puedo publicar una imagen)
Una forma de hacerlo es usar el método 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 fragmento largo:
<!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>
Ok, primero la forma pura de CSS. Puede obtener una alineación vertical en la parte inferior utilizando un posicionamiento relativo + absoluto como este:
<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>
Es posible que tenga algunos problemas con esto, como el comportamiento de IE6, así como problemas de z-index con cosas como menús (la última vez que probé esto, mis menús aparecieron bajo el contenido absoluto).
Además, dependiendo de si todos los elementos deben estar absolutamente posicionados o no, es posible que deba comenzar a hacer cosas como especificar la altura del elemento que lo contiene explícitamente, lo que generalmente no es deseable. 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 las tablas, 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>
Pruébalo y verás que funciona perfectamente.
La multitud anti-mesa gritará asesinato azul, pero lo anterior es la manera más simple y compatible con el navegador (especialmente si se requiere soporte IE6) para hacer esto.
Ah, y siempre prefiero usar clases con estilos CSS en línea.
Puedes hacer esto usando line-height pero solo funciona en elementos en línea y si el texto no se ajusta.
<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>
Cambié el div a span . Si desea mantener div solo agregue display:inline con 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>
Si coloca el div flotante derecho antes del div flotante izquierdo en el HTML, se alineará verticalmente.
Alternativamente, puede hacer flotar ambos divs restantes, eso es perfectamente válido, y cómo se codifican la mayoría de los diseños de CSS.
edite solo vuelva a leer las preguntas y vea que una de las casillas debe estar flotando hacia la derecha ... de modo que lo que sigue a continuación no funciona ... pero podría ser adaptable
En primer lugar, debe utilizar los tramos en lugar de los 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 has hecho eso, esto funciona como un regalo, 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>