• 0

كيف أنشئ الأعمدة المتعددة في موقعي بإستخدام "CSS3" ؟

  • 0

يمكنك ذلك بطريقتين :

  • الأولى تعتمد على عرض محتوى الصفحة بعدد أعمدة ثابت و عرض عمود متغيّر و يتم ذلك من خلال إسناد عدد الأعمدة إلى الخاصيّة "column-count" التي تقسّم المحتوى إلى العدد المذكور من الأعمدة و يتغيّر عرض الأعمدة مع تغّر حجم نافذة المستعرض.
  • الثانية تعتمد على عرض محتوى الصّفحة بعرض عمود ثابت و عدد أعمدة متغير حيث يتم ذلك من خلال عرض العمود الواحد إلى الخاصيّة "column-width" و المسافة بين كل عمودين إلى الخاصيّة "column-gap" و في هذه الطريقة تحافظ الأعمدة على عرض ثابت لكل منها و يتغيّر عدده مع تغيّر حجم نافذة المستعرض.

و في المثال التالي يتم إنشاء الأعمدة المتعددة بعدد أعمدة ثابت و عرض عمود متغيّر حسب الشيفرة التالية:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
  <head> 
    <style type="text/css">  
      .newspaper 
      { 
        -webkit-column-count:3; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="newspaper"> 
this is a sample content this is a sample content . 
    </div> 
  </body> 
</html> 

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن