Prefácio: Nos quatro artigos anteriores, apresentei o princípio do Jiugongge e um caso de aplicação. Chegou ao fim, mas esse layout ainda tem certas limitações. Sua maior limitação é que ele não pode usar imagens com cantos arredondados transparentes como método de layout de interface, se os cantos arredondados externos transparentes não puderem ser usados, a escalabilidade desse layout será bastante afetada e o layout não poderá ser promovido. Este artigo visa resolver fundamentalmente este problema.
Eu sei que a causa raiz desse problema é que as colunas das bordas esquerda e direita no meio têm verticalmente a mesma altura, porque seu contêiner pai é o contêiner total da caixa, não um contêiner independente, e os contêineres dos cantos esquerdo e direito no inferior são deslocados negativamente para cima. O que é movido acima deles bloqueia a cor de fundo. Portanto, quando a imagem no container arredondado for translúcida ou transparente, a parte transparente mostrará o fundo da imagem nas bordas esquerda e direita.
Eu já havia descoberto esse problema ao fazer o modelo anterior de " Unbreakable Nine-square Grid Layout ". Naquela época, também usei imagens de cantos arredondados transparentes para fazer as imagens de cantos arredondados. Para reduzir o problema, também usei imagens de canto arredondado transparente. A parte transparente da peça de canto arredondado transparente é adicionada com uma cor de fundo igual ao contêiner principal para evitar esse problema. Mas este método não é a solução definitiva em nosso trabalho diário, é necessário usar cantos arredondados translúcidos para customizar a interface. Portanto, naquele artigo, apenas evitou o problema sem resolvê-lo fundamentalmente. Depois que o artigo foi publicado, um amigo atencioso finalmente levantou essa questão depois de experimentar Haha, parece que não consigo evitar esse problema sendo preguiçoso.
Depois de saber a origem do problema, corrigi-lo é uma questão simples.
Como meu artigo é baseado no artigo " The Unbreakable Nine-Gong Grid Layout ", se você ainda não leu esse artigo, é melhor lê-lo primeiro e depois ler este artigo. Isso ajudará na sua digestão!
Parece que para resolver este problema, preciso fazer algumas mudanças estruturais na parte intermediária. Porque eu quero que seus contêineres de borda esquerda e direita tenham verticalmente a mesma altura da área de conteúdo, ou seja, quando a altura do conteúdo do texto na área de conteúdo mudar, a altura de suas bordas esquerda e direita será ajustada de forma síncrona. Este é um layout típico de três colunas com a mesma altura. Mas o que é um pouco diferente do layout de três colunas que costumo ver é que quero que a largura da área de conteúdo do meio preencha toda a largura do meio, mas não é 100% da largura, mas 100% menos a largura de as bordas das colunas esquerda e direita E essa largura não é uma porcentagem, todas elas têm valores de pixel fixos. Isso precisa ser resolvido usando o método que mencionei em meu artigo anterior.
Para fazer isso preciso alterar a estrutura original:
【Camada estrutural】
Eu adiciono um contêiner pai aos três contêineres esquerdo, intermediário e direito no meio e defino um nome de classe intermediário para ele. Então, a estrutura da área intermediária agora deve ser assim:
<div class="meio">
<span class="m_l"></span>
<span class="m_r"></span>
<div class="contexto">
<p>Área de conteúdo< p>
</div>
</div>