Left

تريد ترتيب هذه الأعمدة أفقيًا ، على غرار الشبكة أدناه ، دون تغيير بنية html:

--------------- --------------------------------------- | | | | | العمود اليسار | مركز العمود | عمود الحق | | | | | ------------------------------------------------- -

لتحقيق ذلك ، استخدم خصائص CSS:

   
Column center
   
Column left
   
Column right

. العرض: 33.333 ٪ ؛ } .Column-Right {Float: Right ؛ العرض: 33.333 ٪ ؛ } .Column-Center {display: inline block ؛ العرض: 33.333 ٪ ؛ }

شاهد العرض التوضيحي المباشر هنا. تعويم: اليسار. الموقف: قريب العرض: 20 ٪ ؛ / *للأغراض التجريبية فقط */ الخلفية: #f2f2f2 ؛ الحدود: 1 بكسل الصلبة #e6e6e6 ؛ حجم الصناديق: صندوق الحدود ؛ } . اليسار: 20 ٪ ؛ } . اليسار: 40 ٪ } . اليسار: 60 ٪ ؛ } . اليسار: 80 ٪ ؛ } .Column-Inset-1 { اليسار: -20 ٪ ؛ } .Column-Inset-2 { اليسار: -40 ٪ ؛ } .Column-Inset-3 { اليسار: -60 ٪ ؛ } .Column-Inset-4 { اليسار: -80 ٪ ؛ }

   
Column center
   
Column left
   
Column right

واستخدم html مثل هذا: