أعمدة CSS متعددة

أعمدة CSS متعددة من الأشياء التي لا تخفى عن هذه اللغة في التصميم ، حيث إنها ميزة جيدة لدعم الشاشات الكبيرة أثناء قراءة عدد كبير من السطور ، وتعتمد هذه الفكرة على تقسيم نص كبير إلى مجموعة من نصوص في نفس سياق المجلات الورقية.

 

تعريف

column-count:2;
column-gap: 70px;

</pre >

حيث يشير عدد الأعمدة إلى عدد الأعمدة التي نريد تقسيم النص إليها ، بينما تشير فجوة العمود إلى المسافات الفارغة بين العمودين.

 

فوائد أعمدة CSS متعددة

هناك فوائد عديدة في تقسيم النصوص إلى أعمدة ، وهي:

  • إعطاء محتوى جمالي للزوار المحتملين لصفحتنا.
  • سهولة البحث عن الكلمات أثناء تحليل النص.
  • دعم الشاشات الكبيرة من خلال توفير مساحات قراءة إضافية.

 

مثال

من فضلك ، لفهم CSS متعدد الأعمدة جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{

    column-count:3;
    column-gap: 100px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Multi Columns</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.

            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.
        </div>
    </body>

</html>