صف واحد وعمود واحد
هنا اقتباس:
الجسم { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛
#content { الهامش الأيسر: تلقائي؛ الهامش الأيمن: العرض التلقائي: 400 بكسل؛
صفين وعمود واحد
هنا اقتباس:
الجسم { الهامش: 0 بكسل الحشو: 0 بكسل؛
#content-top { Margin-left:auto;
#content-end {margin-left:auto;
ثلاثة صفوف وعمود واحد
هنا اقتباس:
الجسم { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛
#content-top { Margin-left:auto;
#content-mid { Margin-left:auto;
#content-end { Margin-left:auto;
صف واحد وعمودين
هنا اقتباس:
#bodycenter { العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛ الفائض: تلقائي }
#bodycenter #dv1 {طفو: يسار؛ عرض: 280 بكسل؛}
#bodycenter #dv2 {float: right;width: 410px;}
صفين وعمودين
هنا اقتباس:
#header{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛}
#bodycenter { العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter #dv1 { تعويم: العرض الأيسر: 280 بكسل؛}
#bodycenter #dv2 { تعويم: يمين؛ العرض: 410 بكسل؛}
ثلاثة صفوف وعمودين
هنا اقتباس:
#header{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter {العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter #dv1 { تعويم: يسار؛ العرض: 280 بكسل؛}
#bodycenter #dv2 { تعويم: العرض الصحيح: 410 بكسل؛}
#تذييل{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
صف واحد وثلاثة أعمدة
تحديد المواقع المطلقة
هنا اقتباس:
#left { الموضع: مطلق؛ الأعلى: 0px؛ اليسار: 0px العرض: 120px }
# الأوسط {الهامش: 20px 190px 20px 190px }
#يمين {الموضع: مطلق؛ الأعلى: 0 بكسل؛ اليمين: 0 بكسل العرض: 120 بكسل؛}
تعويم تحديد المواقع واحد
أتش تي أم أل:
هنا اقتباس:
CSS:
هنا اقتباس:
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: يمين العرض: 40%؛}
.واضح{ واضح:كلاهما؛}
تعويم تحديد المواقع اثنين
أتش تي أم أل:
هنا اقتباس:
CSS:
هنا اقتباس:
الجسم {الهامش: 0؛ الحشو الأيسر: 200 بكسل؛ الحشو الأيمن: 190 بكسل؛ الحد الأدنى للعرض: 240 بكسل؛}
عمود {الموضع: نسبي؛ تعويم: يسار؛}
#المركز {العرض: 100%؛}
#يسار {العرض: 180 بكسل؛ اليمين: 240 بكسل؛
#يمين {العرض: 130 بكسل؛ الهامش الأيمن: -100%؛}
صفين وثلاثة أعمدة
أتش تي أم أل:
هنا اقتباس:
CSS:
هنا اقتباس:
#header{width:100% height:auto;}
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: العرض: 40٪؛}
.واضح{ واضح:كلاهما؛}
ثلاثة صفوف وثلاثة أعمدة
أتش تي أم أل:
هنا اقتباس:
CSS:
هنا اقتباس:
#header{width:100% height:auto;}
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: يمين العرض: 40%؛}
.واضح{ واضح:كلاهما؛}
#تذييل{العرض:100% الارتفاع:تلقائي؛}
ملاحظة: الأمثلة المذكورة هنا هي أمثلة شائعة الاستخدام، وليس لأغراض البحث، ولم يتم تعيين الهامش والحشوة والبودير والسمات الأخرى لكل مربع!