Elementos de nivel de bloque dentro de la pantalla: bloque en línea

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

Pregunta

Estoy tratando de poner algunos elementos (bloqueados verticalmente) de display: block dentro de un elemento display: inline-block. De acuerdo con la especificación CSS, el elemento de bloque en línea debe ser un bloque que lo contenga, de modo que pueda mostrar: elementos de bloque dentro de él y estos no deberían afectar el resto del diseño.

Sin embargo, la pantalla: elementos de bloque dentro de la pantalla: elementos de bloque en línea interrumpen el resto de la página; tampoco tiene nada en absoluto dentro del bloque en línea, o incluso un elemento básico como un párrafo; solo un texto simple evita la interrupción del resto de la página (por interrupción me refiero a desplazar otras divisiones hacia abajo, por ejemplo, en este caso, el bloque rojo izquierdo se mueve hacia abajo una línea y tiene un espacio en blanco en blanco encima). 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>

Lo anterior se muestra como dos paneles, rojo izquierdo, verde derecho, como se esperaba. Si cambio & Quot; Derecha & Quot; a 

<p>Right</p>

o eliminarlo por completo, o (como quiero hacer) reemplazarlo con un par de divs, obtengo el formato incorrecto.

¿Es esto un error de Firefox, o estoy haciendo algo mal, o mis expectativas son incorrectas? (FWIW, IE 7 los manipula a todos por igual, como si no entendiera el bloqueo en línea; no importa, esta es una aplicación interna y solo estoy usando Firefox). Es posible que pueda obtener el diseño que quiero usando float / margin, pero preferiría no tener que hacer eso.

¿Fue útil?

Solución

Bien mostrar: el bloqueo en línea puede ser un poco complicado para obtener un navegador cruzado. Requerirá, como mínimo, algunos hacks y, para Firefox 2, potencialmente un elemento adicional.

CSS 

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

display: -moz-inline-stack es para Firefox 2. Todos los hijos inmediatos necesitarán tener display: block o, de lo contrario, ser elementos de nivel de bloque. Tenga en cuenta que si necesita que su elemento inline-block reduzca la envoltura, creo que puede usar display: -moz-inline-box en su lugar.

zoom: 1 da hasLayout al elemento (para IE 7 y abajo). Parte 1 del truco necesario para IE7 y compatibilidad inferior.

** display: inline * es una segunda parte del pirateo necesaria para IE7 y por debajo de la compatibilidad.

De vez en cuando necesito agregar desbordamiento: oculto para compatibilidad con IE también.

Para su situación específica, creo que lo que necesita 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>

Otros consejos

  

Obtengo el formato incorrecto.

Está siendo mordido por colapso de margen , un CSS & # 8216; inteligencia & # 8217; que es un dolor tan frecuente como una bendición. El margen de & Lt; p & Gt; se pliega hacia afuera para convertirse en un margen superior en el bloque en línea; esto entonces se comporta como un margen en un & # 8216; en línea & # 8217; elemento haría, empujando la alineación vertical de la línea de texto.

Puede evitar que suceda eliminando los márgenes de & # 8216; p & # 8217; elementos y utilizando relleno en su lugar. Alternativamente, coloque un elemento no vacío sin margen superior en la parte superior del bloque y uno sin margen inferior en la parte inferior.

  

¿Es esto un error de Firefox?

Creo que posiblemente sí, de acuerdo con las especificaciones:

  

Los márgenes de los elementos de bloque en línea no colapsan (ni siquiera con sus elementos secundarios en flujo).

bloque en línea     Este valor hace que un elemento genere un contenedor de bloque de nivel en línea. El interior de un bloque en línea está formateado como un cuadro de bloque, y el elemento en sí está formateado como un cuadro atómico de nivel en línea. modelo de representación visual

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top