Elementos de nivel de bloque dentro de display: inline-block

Estoy tratando de poner algunos (verticalmente apilados) display:block elementos dentro de un display:inline-block elemento. De acuerdo a la especificación de CSS, el inline-block elemento debe ser un bloque que contiene, por lo que puede tener display:block elementos dentro de ella y los que no debe afectar el resto del diseño.

Sin embargo, la pantalla:elementos de bloque dentro de la display:inline-block elementos interrumpir el descanso de la página; por lo que hace no tener nada dentro de la línea de la manzana, o incluso un elemento básico como un párrafo; sólo de texto simple que evita la interrupción del resto de la página (por la interrupción me refiero a cambio de otros divs abajo, por ejemplo, en este caso, el rojo de la izquierda el bloque se mueve hacia abajo una línea y tiene un espacio en blanco por encima de él). Estoy usando Firefox 3.0.6.

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

El de arriba muestra como dos paneles, el rojo de la izquierda, a la derecha de color verde, como se esperaba. Si yo cambio “Derecho” a

<p>Right</p>

o eliminarlo por completo, o (como yo lo quiero hacer) reemplazarlo con un par de divs, tengo la mala formato.

Es esto un bug de Firefox, o estoy haciendo algo mal, o son mis expectativas incorrectas? (Por lo que vale, es decir, 7 destroza a todos por igual, como si no entiende inline-block; no importa, esto es una interna de la aplicación. y sólo estoy usando Firefox). Yo podría ser capaz de obtener el diseño que yo quiero con el flotador/margen, pero preferiría no tener que hacerlo.

¿El uso de <p id=”derecha”>Derecho</p> ?
No. Yo sólo quería una llanura <p> en la mano derecha de la div. El párrafo en sí, no es necesario tener un id en este caso.

OriginalEl autor | 2009-03-03

3 respuestas

  1. 6

    Bien display: inline-block puede ser un poco difícil conseguir cross-browser. Se requerirá, como mínimo, un par de hacks y, para Firefox 2, potencialmente, un elemento adicional.

    CSS

    .inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

    pantalla: -moz-inline-pila es para Firefox 2. Todas las inmediatas de los niños necesitan tener display: block o de lo contrario ser elementos de nivel de bloque. Nota: si usted necesita su inline-block elemento de envoltura retráctil creo que se puede utilizar pantalla: -moz-inline-cuadro de lugar.

    zoom: 1 da hasLayout para el elemento (para IE 7 y siguientes). La parte 1 de el hack necesarios para IE7 y por debajo de compatibilidad.

    **display: inline* es un hack segunda parte de el hack necesarios para IE7 y por debajo de la compatibilidad.

    Yo de vez en cuando necesita agregar overflow: hidden para IE compatibilidad así.

    Para su situación específica, creo que lo que necesitas es:

    <html><head><style type="text/css">
    #left {
    display: inline-block;
    background: red;
    width: 20%;
    height: 100%;
    vertical-align: top;
    }
    #right {
    display: inline-block;
    background: green;
    width: 80%;
    height: 100%;
    vertical-align: top;
    }
    </style></head><body>
    <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
    </body></html>
    Estoy usando Firefox 3. No me importa acerca de Firefox 2 (o cualquier otro navegador) ahora. Son alguno de los hacks necesarios para FF3?
    FF3 debe tener pleno apoyo.
    Lo siento, entendido mal, tu pregunta original.
    Vertical-align:top tengo. No me habia fijado vertical-align cuando yo estaba jugando con ella antes (aún usando flotadores de entonces), pero no en esta reducción. Muchas gracias.

    OriginalEl autor Joshua Shannon

  2. 3

    Puedo obtener el formato incorrecto.

    Está siendo mordido por margen de colapso, CSS ‘inteligencia’ que es un dolor tan a menudo como es una bendición. El margen de la <p> se derrumba hacia el exterior para convertirse en un margen superior en el inline-block; esta a su vez se comporta como un margen sobre un ‘inline’ elemento, empujando la vertical de la alineación de la línea de texto.

    Puede impedir que suceda mediante la eliminación de los márgenes de la ‘p’ de los elementos y mediante el relleno en su lugar. Coloque también un no-elemento vacío sin margen superior en la parte superior del bloque y uno sin margen inferior en la parte inferior.

    Es esto un bug de Firefox

    Creo que, posiblemente, sí, de acuerdo a la especificación del:

    Márgenes de inline-block elementos no se colapsan (ni siquiera con su in-flujo de niños).

    La última parte de su respuesta, me mordió el día de hoy. Gracias.

    OriginalEl autor bobince

  3. 0

    inline-block
    Este valor hace que un elemento para generar un nivel de la línea de bloque contenedor. En el interior de un inline-block es el formato de un bloque de caja, y el elemento en sí es el formato de una atómico de nivel de la línea de caja.
    representación visual del modelo

    OriginalEl autor Bill

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *