Prefacio: En los cuatro artículos anteriores, presenté el principio de Jiugongge y un caso de aplicación. Ha llegado a su fin, pero ese diseño todavía tiene ciertas limitaciones. Su mayor limitación es que no puede utilizar imágenes con esquinas redondeadas transparentes como método de diseño de interfaz. Si no se pueden utilizar esquinas redondeadas exteriores transparentes, la escalabilidad de este diseño se verá muy afectada y no se podrá maximizar el diseño. Este artículo tiene como objetivo resolver fundamentalmente este problema.
Sé que la causa principal de este problema es que las columnas de los bordes izquierdo y derecho en el medio tienen verticalmente la misma altura, porque su contenedor principal es el contenedor total de la caja, no un contenedor independiente, y los contenedores de las esquinas izquierda y derecha en el La parte inferior está desplazada negativamente hacia arriba. Lo que se mueve encima de ellos bloquea el color de fondo. Por lo tanto, cuando la imagen en el contenedor redondeado es translúcida o transparente, la parte transparente mostrará el fondo de la imagen de los bordes izquierdo y derecho.
Ya había descubierto este problema al hacer el modelo anterior de " Diseño de cuadrícula irrompible de nueve cuadrados ". En ese momento, también usé imágenes transparentes con esquinas redondeadas para hacer las imágenes con esquinas redondeadas. Para reducir el problema, también utilicé imágenes de esquinas redondeadas transparentes. La parte transparente de la pieza de esquina redondeada transparente se agrega con un color de fondo que es el mismo que el del contenedor principal para evitar este problema. Pero al final este método no es la solución definitiva. En nuestro trabajo diario, es necesario utilizar esquinas redondeadas translúcidas para personalizar la interfaz. Por lo tanto, en ese artículo simplemente evitó el problema sin resolverlo fundamentalmente. Después de que se publicó el artículo, un amigo atento finalmente planteó esta pregunta después de probarlo Jaja, parece que no puedo evitar este problema siendo vago.
Una vez que conozca el origen del problema, solucionarlo es una cuestión sencilla.
Debido a que mi artículo se basa en el artículo " El diseño de cuadrícula irrompible de nueve gongs ", si aún no lo ha leído, es mejor que lo lea primero y luego lea este artículo. ¡Esto ayudará a tu digestión!
Parece que para solucionar este problema necesito hacer algunos cambios estructurales en la parte media. Porque quiero que sus contenedores de borde izquierdo y derecho tengan verticalmente la misma altura que el área de contenido, es decir, cuando cambie la altura del contenido de texto en el área de contenido, la altura de sus bordes izquierdo y derecho se ajustará sincrónicamente. Este es un diseño típico de tres columnas con la misma altura. Pero lo que es un poco diferente del diseño de tres columnas que suelo ver es que quiero que el ancho del área de contenido del medio llene todo el ancho del medio, pero no es el 100% del ancho, sino el 100% menos el ancho de los bordes de las columnas izquierda y derecha. Y este ancho no es un porcentaje, todos tienen valores de píxeles fijos. Esto debe resolverse utilizando el método que mencioné en mi artículo anterior.
Para hacer esto necesito cambiar la estructura original:
【Capa estructural】
Agrego un contenedor principal a los tres contenedores izquierdo, medio y derecho en el medio y defino un nombre de clase medio para él. Luego, la estructura del área central ahora debería ser así:
<div class="medio">
<span class="m_l"></span>
<span class="m_r"></span>
<div clase="contexto">
<p>Área de contenido< p>
</div>
</div>