الطرق الشائعة الاستخدام لتخطيط CSS: float:none|left|right
قيمة:
لا شيء: القيمة الافتراضية. الكائن لا يطفو
اليسار: يتدفق النص إلى يمين الكائن
اليمين: يتدفق النص إلى يسار الكائن
كيف يعمل، انظر مثالا لصف واحد وعمودين
كود أتش تي أم أل:
| وفيما يلي المحتوى المقتبس: <div معرف = "التفاف"> <div id="column1">هذا هو العمود الأول</div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> /*هذا يتعارض مع هدف معيار الويب، ويعني فقط أن العناصر الموجودة أدناه تحتاج إلى مسح*/ </div> |
كود CSS:
| وفيما يلي المحتوى المقتبس: #التفاف{العرض:100؛الارتفاع:تلقائي؛} #column1{تعويم:يسار؛عرض:40؛} #column2{تعويم:يمين؛العرض:60؛} .واضح{واضح:كلاهما؛} |
الموضع: ثابت|مطلق|ثابت|نسبي
قيمة:
ثابت: القيمة الافتراضية. لا يوجد تحديد موضع خاص، فالكائن يتبع قواعد تحديد موضع HTML
مطلق: اسحب الكائن خارج تدفق المستند واستخدم السمات اليسرى واليمنى والأعلى والأسفل وغيرها من السمات لإجراء تحديد موضع مطلق بالنسبة إلى الكائن الأصلي الأقرب إليه باستخدام معظم إعدادات تحديد الموضع. في حالة عدم وجود مثل هذا الكائن الأصلي، يتم استخدام الكائن الأساسي. ويتم تعريف تتاليها من خلال سمة z-index
ثابت:؟غير معتمد. تحديد موضع الكائن يتبع الطريقة المطلقة. ولكن هناك بعض القواعد التي يجب اتباعها
نسبي: لا يمكن تكديس الكائنات، ولكن سيتم إزاحتها في تدفق المستند العادي استنادًا إلى السمات اليسرى واليمنى والأعلى والأسفل وغيرها.
وينفذ مثال صف واحد وعمودين
كود أتش تي أم أل:
| وفيما يلي المحتوى المقتبس: <div معرف = "التفاف"> <div id="column1">هذا هو العمود الأول</div> <div id="column2">هذا هو العمود الثاني</div> </div> |