مقالة مقدمة من wulin.com (www.vevb.com): CSS3+HTML5 Notes 4-CSS Three Column Layout Width فقط.
في الماضي ، عند القيام بتخطيط من ثلاثة أعمدة ، قد تكون الطريقة الأكثر شيوعًا وأبسط: استخدام هامش Float+لتنفيذه. في عصر CSS3 ، يمكن أن يكون لدينا طريقة أخرى عصرية ، وهي نموذج الصندوق في CSS3 ، مع الكود على النحو التالي:
CSS3 تخطيط ثلاثة أعمدة CSS3 تخطيط ثلاثة أعمدة middleleftrightتأثير التشغيل تحت Google Chrome كما يلي:
ملخص: يتم استخدام سمة Box-Flex بشكل أساسي هنا. تتيح هذه السمة بشكل أساسي للحاوية الفرعية لتقسيم العرض وفقًا لقواعد معينة بالنسبة للحاوية الأصل. إذا كانت حاويات الأطفال الثلاث تضع قيمة Box-Flex على 1 و 2 و 3 على التوالي ، فستقسم حاويات الأطفال الثلاث العرض وفقًا لنسبة 1: 2: 3.
بالطبع ، يجب ضبط الحاوية الأصل على نموذج مربع لرؤية التأثير ، مثل العرض: -webkit-box ؛ العرض: -moz-box ؛
ومع ذلك ، إذا قمت بتشغيل الكود أعلاه مباشرة ، فلا توجد مشكلة في Chrome ، ولكن عندما يتعلق الأمر بـ Firefox ، يصبح الأمر التالي:
، هل هذا خطأ فايرفوكس؟ في الأصل ، تم إصلاح العروض على الجانبين الأيسر والأيمن ، لكن العروض في الوسط لم يكن لها عرض تكيفي. بعد التواصل مع مؤلف كتاب "الدليل الموثوق بـ HTML5 و CSS3" ، أدركت أن هذا الموقف يحدث لأن عرض الحاوية الأصل لم يتم تعيينه. فقط أضف العرض: 100 ٪ إلى الحاوية الأصل. . . شكرًا لك على مؤلف كتاب "HTM5 و CSS3 Duitive Suitation" ...