La compatibilidad del navegador siempre ha sido un problema común en el diseño de CSS.
Estos dos métodos tienen las siguientes ventajas:
1. No hay necesidad de usar Hack
2. Simple y efectivo, puede hacerlo de un vistazo
3. Diseño jerárquico y modular
4. El código es más razonable y más fácil de identificar
Método 1: Resuelva la desalineación flotante causada al agregar espaciado interno y externo
Por lo general, necesitamos usar flotación para flotar cuando el diseño de columna múltiple.
Para lograr este efecto, agregaremos margen para hacer que la columna directamente desde el espacio, y también agregaremos bordes y acolchado para que el texto interior no se adhiera al borde. Pero ocurrió una situación inesperada.
En la tercera columna, corre hacia abajo. Este no es el efecto que quieres. Entonces analicémoslo. Según ideas generales. El ancho general es de 800 px, la columna izquierda es 200, la media 400 y la columna derecha es 200, que se ve bien, pero debe haber espacio entre estas columnas, por lo que debe cambiarla: columna izquierda 190, media 400, y columna derecha 190. ¿Está bien?
Pero en aras de la buena apariencia, agregaste fronteras. Pero olvidé que el borde también aumentará el ancho. -Ascorador 2 = 168, para no desalinearse. ¿Pero no te parece un poco complicado? Habrá una brecha en tal diseño de algunos navegadores.
Bien, hablemos de mi método. Según la jerarquía, separo el diseño y la pantalla. El diseño es que, además del ancho y el tono exterior flotante, el diseño es más fácil de calcular. Luego agregamos un DIV en la columna del diseño para mostrar el borde, el espaciado interno y externo, etc. No puede necesitar definir el ancho, puede adaptarse. Para facilitar su memoria, improvisé un poema: el ancho fijo debe estar flotando, sin bordes ni parches, coloqué un DIV adentro y defina el estilo para funcionar.
Método 2: Resuelva los elementos flotantes internos de la capa externa
Para crear un catálogo de productos o un álbum de imágenes, utilizamos UL o N Divs para flotar.
Pero las cosas son contrarias a sus deseos.
La solución a esto es en realidad muy simple.
1. Puede agregar un flotador: izquierda;
2. Otro método es colocar un DIV para despejar la flotación al final después de que termina el flotador.
3. Agregue altura o ancho a la capa externa.