CSS মাল্টিকলাম

CSS 多列布局

CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：

三国演义

第一回
宴桃园豪杰三结义
斩黄巾英雄首立功
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。

...... ......

CSS বহুস্তম্ভ এসপ্যাট্রিবিউট

এই চাপে, আপনি নিচের বহুস্তম্ভ এসপ্যাট্রিবিউটসকে শিখবেন:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

ব্রাউজার সমর্থন

টেবিলের সংখ্যাটি এসপ্যাট্রিবিউটটির পূর্ণ সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি উল্লেখ করে।

এসপ্যাট্রিবিউট চ্রোম আইই ফায়ারফক্স স্যাফারি অপেরা
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS বহুস্তম্ভ সৃজন

column-count এসপ্যাট্রিবিউটটি এলিমেন্টকে কতটি স্তম্ভে বিভক্ত করা হবে তা নির্ধারণ করে。

নিচের উদাহরণটিতে <div> এলিমেন্টটির মধ্যে টেক্সটকে 3 স্তম্ভে বিভক্ত করা হয়েছে:

উদাহরণ

div {
  column-count: 3;
}

স্বয়ং প্রয়োগ করুন

CSS স্তম্ভ গাপ নির্ধারণ

column-gap এসপ্যাট্রিবিউটটি স্তম্ভের মধ্যের গাপ নির্ধারণ করে。

নিচের উদাহরণটিতে 40 পিক্সেল হল স্তম্ভের মধ্যের গাপটি নির্ধারণ করা হয়েছে:

উদাহরণ

div {
  column-gap: 40px;
}

স্বয়ং প্রয়োগ করুন

CSS স্তম্ভ নিয়ম

column-rule-style এসপ্যাট্রিবিউটটি স্তম্ভের মধ্যের স্টাইল নির্ধারণ করে。

উদাহরণ

div {
  column-rule-style: solid;
}

স্বয়ং প্রয়োগ করুন

column-rule-width এসপ্যাট্রিবিউটটি স্তম্ভের মধ্যের প্রস্থ নির্ধারণ করে。

উদাহরণ

div {
  column-rule-width: 1px;
}

স্বয়ং প্রয়োগ করুন

column-rule-color এসপ্যাট্রিবিউটটি স্তম্ভের মধ্যের রঙ নির্ধারণ করে。

উদাহরণ

div {
  column-rule-color: lightblue;
}

স্বয়ং প্রয়োগ করুন

column-rule এসপ্যাট্রিবিউটটি উপরোক্ত column-rule-* এসপ্যাট্রিবিউটসকে সেট করার জন্য সংক্ষিপ্ত এসপ্যাট্রিবিউট

নিচের উদাহরণটিতে স্তম্ভের মধ্যের প্রতিটি স্টাইল, প্রস্থ এবং রঙ নির্ধারণ করা হয়েছে:

উদাহরণ

div {
  column-rule: 1px solid lightblue;
}

স্বয়ং প্রয়োগ করুন

এলিমেন্টকে কতটি স্তম্ভের মধ্যে পার্শ্ববর্তী করা হবে নির্ধারণ

column-span এসপ্যাট্রিবিউটটি এলিমেন্টকে কতটি স্তম্ভের মধ্যে পার্শ্ববর্তী করা হবে তা নির্ধারণ করে。

নিচের উদাহরণটিতে <h2> এলিমেন্টটি সকল স্তম্ভের মধ্যে পার্শ্ববর্তী হবে নির্ধারণ করা হয়েছে:

উদাহরণ

h2 {
  column-span: all;
}

স্বয়ং প্রয়োগ করুন

স্তম্ভ প্রস্থ নির্ধারণ

column-width এসপ্যাট্রিবিউটটি স্তম্ভকে সুপারিশিত সর্বোত্তম প্রস্থ নির্ধারণ করে。

নিচের উদাহরণটিতে 100px হল সুপারিশিত স্তম্ভ প্রস্থটি নির্ধারণ করা হয়েছে:

উদাহরণ

div {
  column-width: 100px;
}

স্বয়ং প্রয়োগ করুন

CSS বহুস্তম্ভ এসপ্যাট্রিবিউট

সকল বহুস্তম্ভ এসপ্যাট্রিবিউটসকে উপস্থাপন করেছে নিচের তালিকায়:

এসপ্যাট্রিবিউট বর্ণনা
column-count এলিমেন্টকে কতটি স্তম্ভে বিভক্ত করা হবে তা নির্ধারণ করুন。
column-fill নিয়মিত স্তম্ভকে কিভাবে পূরণ করা হবে তা নির্ধারণ করুন。
column-gap নিয়মিত স্তম্ভের মধ্যের গাপ নির্ধারণ করুন。
column-rule সকল column-rule-* এসপ্যাট্রিবিউটসকে সেট করার জন্য সংক্ষিপ্ত এসপ্যাট্রিবিউট ব্যবহার করুন。
column-rule-color নিয়মিত স্তম্ভের মধ্যের রঙ নির্ধারণ করুন。
column-rule-style নিয়মিত স্তম্ভের মধ্যের স্টাইল নির্ধারণ করুন。
column-rule-width নিয়মিত স্তম্ভের মধ্যের প্রতিটি মাপ।
column-span একটি এলিমেন্টকে কতটি স্তম্ভ অতিক্রম করবে বলে নির্দিষ্ট করা
column-width স্তম্ভগুলির সুপারিশ করা হয়না শুধু বেশ্যকতা
columns column-width ও column-count নিয়ে সেট করার সংক্ষিপ্ত প্রতিভা