المقدمة: في المقالات الأربع السابقة، قدمت مبدأ Jiugongge وحالة التطبيق، وقد وصلت إلى نهايتها، ولكن هذا التخطيط لا يزال لديه بعض القيود. أكبر قيوده هو أنه لا يمكن استخدام الصور ذات الزوايا الدائرية الشفافة كطريقة لتخطيط الواجهة، إذا تعذر استخدام الزوايا الدائرية الخارجية الشفافة، فستتأثر قابلية التوسع لهذا التخطيط بشكل كبير ولا يمكن تعظيم التخطيط على الأرض. هذه المقالة تهدف إلى حل هذه المشكلة بشكل أساسي.
أعلم أن السبب الجذري لهذه المشكلة هو أن أعمدة الحدود اليمنى واليسرى في المنتصف لها نفس الارتفاع عموديًا، لأن الحاوية الأصلية الخاصة بها هي الحاوية الإجمالية للمربع، وليست حاوية مستقلة، وحاويات الزاوية اليمنى واليسرى في يتم إزاحة الجزء السفلي بشكل سلبي إلى الأعلى، ما يتم تحريكه فوقه يحجب لون الخلفية. لذلك، عندما تكون الصورة الموجودة في الحاوية المستديرة نصف شفافة أو شفافة، سيُظهر الجزء الشفاف خلفية الصورة للحدود اليسرى واليمنى.
لقد اكتشفت هذه المشكلة بالفعل عند إنشاء النموذج السابق لـ " Unbreakable Nine-square Grid Layout ". في ذلك الوقت، استخدمت أيضًا صور زوايا مستديرة شفافة لإنشاء صور الزوايا المستديرة، ولكن بعد اكتشاف هذه المشكلة لاحقًا لتقليل المشكلة، استخدمت أيضًا صورًا شفافة للزاوية المستديرة، وأضيف الجزء الشفاف من قطعة الزاوية المستديرة الشفافة بلون خلفية مماثل للحاوية الرئيسية لتجنب هذه المشكلة. لكن هذه الطريقة ليست الحل النهائي في نهاية المطاف، في عملنا اليومي، من الضروري استخدام زوايا مستديرة شفافة لتخصيص الواجهة، لذلك، في تلك المقالة، تم تجنب المشكلة دون حلها بشكل أساسي. بعد نشر المقال، أثار أحد الأصدقاء اليقظين هذا السؤال أخيرًا بعد تجربته هههه، يبدو أنني لا أستطيع تجنب هذه المشكلة بالكسل.
بمجرد معرفة مصدر المشكلة، يصبح إصلاحها أمرًا بسيطًا.
نظرًا لأن مقالتي مبنية على مقالة " تخطيط شبكة Nine-Gong غير القابلة للكسر "، إذا لم تكن قد قرأت هذه المقالة بعد، فمن الأفضل أن تقرأها أولاً ثم تقرأ هذه المقالة. وهذا سوف يساعد على الهضم الخاص بك!
يبدو أنه لحل هذه المشكلة، أحتاج إلى إجراء بعض التغييرات الهيكلية على الجزء الأوسط. لأنني أريد أن تكون حاويات الحدود اليمنى واليسرى بنفس ارتفاع منطقة المحتوى عموديًا، أي أنه عندما يتغير ارتفاع محتوى النص في منطقة المحتوى، سيتم ضبط ارتفاع حدودها اليسرى واليمنى بشكل متزامن. هذا تخطيط نموذجي مكون من ثلاثة أعمدة بنفس الارتفاع. ولكن ما يختلف قليلاً عن تخطيط الأعمدة الثلاثة الذي أراه عادةً هو أنني أريد أن يملأ عرض منطقة المحتوى الأوسط العرض الأوسط بالكامل، ولكنه ليس 100% من العرض، بل 100% مطروحًا منه عرض حدود العمود الأيمن والأيسر، وهذا العرض ليس نسبة مئوية، فجميعها لها قيم بكسل ثابتة. يجب حل هذه المشكلة باستخدام الطريقة التي ذكرتها في مقالتي السابقة.
للقيام بذلك أحتاج إلى تغيير الهيكل الأصلي:
【الطبقة الهيكلية】
أقوم بإضافة حاوية أصل إلى الحاويات الثلاث اليسرى والوسطى واليمنى في المنتصف وحدد اسم الفئة الأوسط لها، ثم يجب أن يكون هيكل المنطقة الوسطى كما يلي:
منطقة المحتوى