شرح تفصيلي لحل تخطيط html التكيفي الأوسط الثابت ذو العرض الأيسر والأيمن

تقدم هذه المقالة شرحًا تفصيليًا لحل تخطيط html الأوسط الثابت ذو العرض الأيسر والأيمن">حل تخطيط html التكيفي ومشاركته مع الجميع، كما يلي:

هيكل HTML هو كما يلي

 <div class=box> <div class=left>يسار</div> <div class=right>يمين</div> <div class=center>center</div></div> // كن حذرًا هنا أولاً يتم عرض العناصر العائمة اليمنى واليسرى قبل عرض العنصر الأوسط. بعد تعويم العنصر، ستحتل العناصر الشقيقة المتبقية عرض العنصر الأصلي <style> .box{ height:200px; } .left{ float:left width:300px } .right{ float:right ; العرض: 300 بكسل; } </style>

هيكل HTML هو كما يلي

 <div class=box> <div class=left>يسار</div> <div class=right>يمين</div> <div class=center>center</div></div> // نفس التخطيط العائم , قم أولاً بتمثيل العنصرين الأيسر والأيمن بحيث يتم وضعهما عند الطرفين الأيسر والأيمن للعنصر الأصلي، وتشغل العناصر الوسطى المتبقية العرض المتبقي للعنصر الأصلي. <style> .box{ الموضع: نسبي } .left{ الموضع: العرض المطلق؛ اليسار: 0; } .right{ العرض: 100px; الخلفية: حمراء </style>

سيؤدي وضع عرض العنصر الأصلي: جدول وعرض العنصر الفرعي: خلية الجدول إلى تحويله إلى كتلة مضمّنة.

ميزة هذا التصميم هي التوافق الجيد.

 <div class=box> <div class=left> يسار </div> <div class=center> مركز </div> <div class=right> يمين </div></div><style> .box{ عرض : العرض: 100%؛ .left{ العرض: خلية الجدول؛ العرض: 100px؛ 100% الخلفية: أحمر </style>

عرض العنصر الأصلي: سيتم ترتيب جميع العناصر الفرعية المرنة على التوالي.

سيكون عرض flex:n في العنصر الفرعي هو عرض العنصر الأصلي/n

على سبيل المثال، flex:1، العرض يساوي ارتفاع العنصر الأصلي.

عيب التخطيط المرن هو أن توافقه ليس عاليًا حاليًا، ولا يستطيع متصفح IE استخدام التخطيط المرن.

 <div class=box> <div class=left> يسار </div> <div class=center> مركز </div> <div class=right> يمين </div></div><style> .box{ عرض : flex; width: 100%; } .left{ width: 100px;

عرض العنصر الأصلي: الشبكة؛

أعمدة قالب الشبكة: 100 بكسل تلقائي 100 بكسل؛

بالترتيب، يبلغ عرض العنصر الفرعي الأول 100 بكسل، والثاني تكيفيًا، والثالث 100 بكسل؛

تتمثل ميزة تخطيط الشبكة في أنها بسيطة للغاية ويتم تحديدها مباشرة من خلال نمط العنصر الأصلي. والعيب هو أن توافقها ليس مرتفعًا.

 <div class=box> <div class=left> يسار </div> <div class=center> مركز </div> <div class=right> يمين </div></div><style> .box{ عرض : الشبكة؛ أعمدة قالب الشبكة: 100 بكسل تلقائي 100 بكسل العرض: 100%;

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.