يطبق HTML تخطيطًا مكونًا من عمودين، عرضًا ثابتًا على اليسار ومتكيفًا على اليمين
التنفيذ الأول: <style> body, html{padding:0; هامش:0;} // وفقًا لتحديد موضع CSS، استخدم الموضع العائم أو المطلق لفصل عنصر الكتلة الأيسر عن تدفق المستند العادي ويمكن وضعه جنبًا إلى جنب مع عنصر الكتلة الأيمن div: nth-of -type(1){ float: left; // استخدم الموضع العائم: مطلق; أحمر؛ } // [عنصر على مستوى الكتلة، يملأ عرض العنصر الأصلي تلقائيًا بشكل افتراضي، ويحتل سطرًا واحدًا] // حاليًا: عرض عنصر الكتلة الأيمن = عرض العنصر الأصلي div:nth-of-type(2){ // اضبط الهامش الأيسر على عرض عنصر الكتلة الأيسر. الهامش الأيسر: 300 بكسل; // الآن: عرض عنصر الكتلة الأيمن = عرض العنصر الأصلي - ارتفاع الهامش الأيسر: 220 بكسل الخلفية: أزرق; </style><html> <div>div1</ div> <div>div2</div></html>1) قبل تحديد الهامش الأيسر
2) بعد تحديد الهامش الأيسر
التنفيذ الثاني: <style> body, html{padding:0; هامش:0;} // وفقًا لتحديد موضع CSS، استخدم الموضع العائم أو المطلق لفصل عنصر الكتلة الموجود على اليسار عن تدفق المستند العادي div:nth-of-type(1) ){ float : left; // استخدم الموضع العائم: مطلق; // استخدم الموضع المطلق // top: 0; // left: 0; FC عبارة عن دفق مستند عادي (عادي) وسياق تنسيق ومنطقة عرض في الصفحة ومجموعة من مواصفات العرض. BFC هو سياق تنسيق على مستوى الكتلة. // استخدم سياق التنسيق على مستوى كتلة BFC لإنشاء حاوية مستقلة معزولة div:nth-of-type(2){ // قم بتغيير قيمة التجاوز إلى غير مرئية، مما يؤدي إلى تشغيل BFC overflow: Hidden height: 220px الخلفية: blue </style><html> <div>div1</div> <div>div2</div></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.