سطر واحد وعمود أدناه هو اقتباس:
الجسم { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛
#content { Margin-left:auto; Margin-right:auto; width: 400px width: 370px; }
فيما يلي جزء من الاقتباس:
الجسم { الهامش: 0 بكسل الحشو: 0 بكسل؛
#content-top { Margin-left:auto;
#content-end {margin-left:auto; Margin-right:auto; width: 400px; width: 370px;}
ثلاثة صفوف وعمود واحد:
الجسم { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛
#content-top { Margin-left:auto; width: 400px; width: 370px
; }
#content-end { هامش اليسار: تلقائي؛ هامش اليمين: عرض السيارات: 400 بكسل؛ }
صف واحد وعمودين ما يلي هو جزء من الاقتباس:
#bodycenter { العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛ الفائض: تلقائي }
#bodycenter #dv1 {طفو: يسار؛ عرض: 280 بكسل؛}
#bodycenter #dv2 {float: right;width: 410px;}
صفين وعمودين فيما يلي جزء من الاقتباس:
#header{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛}
#bodycenter { العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter #dv1 { تعويم: العرض الأيسر: 280 بكسل؛}
#bodycenter #dv2 { float: right;width: 410px;}
ثلاثة صفوف وعمودين فيما يلي جزء من الاقتباس:
#header{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter {العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter #dv1 { تعويم: يسار؛ العرض: 280 بكسل؛}
#bodycenter #dv2 { تعويم: العرض الصحيح: 410 بكسل؛}
#footer{ width: 700px; هامش-يمين: تلقائي; هامش-يسار: تلقائي; }
تحديد موضع صف واحد وثلاثة أعمدة:
#left { الموضع: مطلق؛ الأعلى: 0px؛ اليسار: 0px العرض: 120px }
# الأوسط {الهامش: 20px 190px 20px 190px }
#right {position:Absolute;top: 0px; right: 0px width: 120px;}
تعويم لتحديد موضع واحد
أتش تي أم أل:
هنا اقتباس:
<div id="warp"> <div id="column"> <div id="column1">هذا هو العمود الأول</div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> </div> <div id="column3">هذا هو العمود الثالث</div> <div class="clear"></div> </div>
CSS :
هنا اقتباس:
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: يمين العرض: 40%؛}
.clear{ واضح:كلاهما؛}
تحديد المواقع العائمة اثنين
أتش تي أم أل:
فيما يلي جزء مقتبس: <div id="center" class="column"> <h1>هذا هو المحتوى الرئيسي.</h1> </div> <div id="left" class="column"> <h2 >هذا هو الشريط الجانبي الأيسر.</h2> </div> <div id="right" class="column"> <h2>هذا هو الشريط الجانبي الأيمن.</h2> </div>
CSS:
هنا اقتباس:
الجسم {الهامش: 0؛ الحشو الأيسر: 200 بكسل؛ الحشو الأيمن: 190 بكسل؛ الحد الأدنى للعرض: 240 بكسل؛}
عمود {الموضع: نسبي؛ تعويم: يسار؛}
#المركز {العرض: 100%؛}
#يسار {العرض: 180 بكسل؛ اليمين: 240 بكسل؛
#right {width: 130px;margin-right: -100%;}
صفين وثلاثة أعمدة
xhtml: ما يلي هو جزء مقتبس: <div id="header">هذا هو الصف العلوي</div> <div id="warp"> <div id="column"> <div id="column1"> هنا هو الصف الأول عمود واحد</div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> </P> <P></div > <div id= "column3">هذا هو العمود الثالث</div> <div class="clear"></div> </div>
CSS:
هنا اقتباس:
#header{width:100% height:auto;}
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: يمين العرض: 40%؛}
.clear{ واضح:كلاهما؛}
ثلاثة صفوف وثلاثة أعمدة
أتش تي أم أل:
فيما يلي مقتطف مقتبس: <div id="header">هذا هو الصف العلوي</div> <div id="warp"> <div id="column"> <div id="column1">هنا العمود الأول </div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> </div> <div id="column3">هذا هو العمود الثالث </div> <div class="clear"></div> </div> <div id="footer">هذا هو الصف السفلي</div>
CSS:
هنا اقتباس:
#header{width:100% height:auto;}
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: يمين العرض: 40%؛}
.واضح{ واضح:كلاهما؛}
#تذييل{العرض:100% الارتفاع:تلقائي؛}