html - poner - etiquetas de tipo en linea
Elementos de nivel de bloque dentro de la pantalla: bloque en línea (3)
Me sale mal el formato.
Usted está siendo mordido por el colapso de los márgenes , una "astucia" CSS que es dolorosa siempre que sea una bendición. El margen de <p> colapsa hacia afuera para convertirse en un margen superior en el bloque en línea; esto se comporta como lo haría un margen en un elemento ''en línea'', empujando la alineación vertical de la línea de texto.
Puedes evitar que suceda quitando los márgenes de los elementos ''p'' y usando el relleno. Alternativamente, coloque un elemento no vacío sin margen superior en la parte superior del bloque y otro 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 hijos en flujo).
Estoy intentando poner algo de pantalla (apilada verticalmente): elementos de bloque dentro de una pantalla: elemento de bloque en línea. De acuerdo con la especificación de CSS, el elemento de bloque en línea debe ser un bloque contenedor, por lo que puede tener visualización: bloquear elementos 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; también lo hace tener nada en absoluto dentro del bloque en línea, o incluso un elemento básico como un párrafo; solo el texto simple evita la interrupción del resto de la página (por interrupción me refiero a desplazar otros divs hacia abajo, por ejemplo, en este caso, el bloque rojo izquierdo se mueve hacia abajo 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 "Derecha" a
<p>Right</p>
o eliminarlo por completo, o (como quiero hacer) reemplazarlo con un par de divs, obtengo el mal formato.
¿Es esto un error de Firefox, o estoy haciendo algo mal, o mis expectativas son incorrectas? (FWIW, IE 7 los destroza a todos por igual, como si no entendiera el bloque 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.
Visualización del pozo: el bloque en línea puede ser un poco complicado para obtener el navegador cruzado. Requerirá como mínimo, unos pocos ataques y, para Firefox 2, potencialmente un elemento adicional.
CSS
.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
pantalla: -moz-inline-stack es para Firefox 2. Todos los niños inmediatos necesitarán mostrar: bloquear o bloquear elementos de otro tipo. Tenga en cuenta que si necesita que su elemento de bloque en línea se contraiga, 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 de hack del hack necesaria para IE7 y compatibilidad por debajo.
De vez en cuando necesito agregar desbordamiento: oculto para la compatibilidad de 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>
inline-block 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