Estoy tratando de flotar dos divs con fuentes diferentes tamaños. No puedo encontrar una manera de alinear el texto en la misma línea de base. Esto es lo que he estado tratando de:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>
InformationsquelleAutor chellmuth | 2009-06-20

5 Comentarios

  1. 42

    Aceptar, en primer lugar, el puro CSS manera. Usted puede conseguir la alineación vertical a la parte inferior con relativa+posicionamiento 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>

    Usted puede tener algunos problemas con esto, como IE6 comportamiento de los z-index problemas con cosas como menús (la última vez que probé este mi menús apareció bajo la absoluta contenido).

    También, dependiendo de si todos los elementos deben ser posicionadas de forma absoluta o no, puede que tenga que empezar a hacer cosas como la especificación de la altura del elemento de contención de forma explícita, que es generalmente indeseable. Idealmente, usted quiere que el contenedor de tamaño automático para sus hijos.

    El problema es que las líneas de base de los diferentes tamaños de las fuentes no coinciden y no sé de un «puro CSS manera de hacer esto.

    Con 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 a la perfección.

    El anti-tabla multitud le grito azul asesinato, pero la de arriba es la más simple, más compatibles con el explorador manera (especialmente si IE6 se requiere de soporte) de hacer esto.

    Ah, y siempre se prefiere el uso de clases de estilos CSS en línea.

    • En su mayoría ídem. Prefiero definir una altura sobre el contenedor de recurrir a tablas, pero hago principalmente el desarrollo de aplicaciones web, donde todo el apestoso diseño es absolutamente colocado ya. Yo no esperaría IE6 a la lucha con que a menos que haya un montón de mierda pasando 🙂
    • Si desea alinear con la línea de base del texto, no veo de qué otra manera se puede hacer que el uso de tablas. Las cosas dentro de un div, fundamentalmente son demasiado independientes el uno del otro, y se extiende no puede ser alineado queramos o no. El uso de las tablas cuando las tablas están mal la cosa está mal, el uso de las tablas cuando están en lo correcto es lo correcto. El uso de ellos cuando son la única cosa que funciona es, sin embargo, perfectamente aceptable en mi libro.
    • Yo preferiría «vertical-align: bottom»
  2. 9

    editar acabo de volver a leer las preguntas y vio un cuadro de necesidades flotando a la derecha… por lo que el siguiente no funciona… pero podría ser adaptable

    Primero de todos, usted debe estar utilizando abarca más que divs como el contenido va a ser en línea a terminar con. Yo no sé los pormenores de por qué, pero esto significa que sus elementos se comportan un poco más amigable a través de navegadores.

    Una vez que hayas hecho esto, esto funciona de maravilla, 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 – acaba de cambiar mi flotaba párrs a en línea bloque abarca, y de hecho el trabajo!
  3. 1

    Usted puede hacer esto usando la línea-altura pero sólo funciona en los 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>

    He cambiado el div a span. Si desea mantener div acaba de agregar 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>
  4. 0

    ¿Te refieres a los valores basales en el tipográfica sentido? (Es decir, cada línea de texto es el nivel con la línea correspondiente en la otra columna) Si ese es el caso, el tamaño de la fuente deben ser múltiplos de cada uno de los otros-por ejemplo, 12 y 18px (1:1.5).

    Si te refieres a los divs necesitan ser de la misma altura, no hay una manera fácil de hacer esto. Puede establecer manualmente una altura (height:100px;), o el uso de javascript para ajustar el uno como el otro de los cambios.

    O, usted puede fingir la misma altura encerrando los dos divs en un contenedor y, a continuación, aplicar un estilo de fondo para el contenedor que imita la apariencia de las columnas, el establecimiento de que se repita verticalmente. De esa manera, se obtiene de imitación de las columnas. Para una visión en profundidad, ver este clásico de Una Lista Aparte del artículo.

    Quiso decir, tiene dos piezas de texto, y ambos deben estar en la parte inferior de las columnas? (lo siento, no se puede publicar una imagen aún)

    Una forma de hacer esto es mediante la Imitación de las Columnas método anterior.

    La otra manera es configurar el texto en su propio contenedor en el interior del texto. Entonces, la posición de ambos absolutamente en la parte inferior de las columnas … aquí un 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 quería decir, pero 18 no es un número entero múltiplo de 12 y, por el contrario, algo es un no-entero múltiplo de 12.
    • Algunos en serio la nigromancia, con este comentario, pero creo que lo que quiso decir con eso era lo que ellos necesitan compartir un factor común, que en este caso sería de 6.
  5. -2

    Si pones el derecho div flotante antes de la izquierda div flotante en el HTML y se va a alinear verticalmente.

    Alternativamente, usted puede flotar ambos divs izquierda – que es perfectamente válido – y cómo la mayoría de los diseños CSS están codificados.

    • Que no les ayuda partido coinciden en la línea de base, que es la cuestión (he hecho el mismo error hasta que me vuelva a leer).
    • Yo pensé lo mismo!

Dejar respuesta

Please enter your comment!
Please enter your name here