CSS ကော်လံမျိုးစုံ
CSS Multi-column Layout
CSS multi-column layout သည် သတင်းစာများတွင်ကဲ့သို့ စာသားကော်လံများစွာကို အလွယ်တကူ အဓိပ္ပါယ်ဖွင့်ဆိုနိုင်သည်-
နေ့စဉ်ပင်း
နာကျင်မှုက အချစ်ပဲ ။ အဲဒါက နည်းနည်းလေးမှ ဖြစ်လာတာဆိုတော့ ကျွန်တော်တို့ရဲ့ ပုံမှန်အလေ့အကျင့်က အကျိုးဆက်တွေကို အခွင့်ကောင်းယူဖို့၊ အိုလံပစ်ပွဲတော်ဗျူရိုမှာ နာကျင်ကိုက်ခဲမှု ဒါမှမဟုတ် အိုလံပစ်ပွဲတော်ဗျူရိုမှာ နာကျင်ကိုက်ခဲမှုရဲ့ နောက်ဆက်တွဲဆိုးကျိုးတွေကို အနှောက်အယှက်ဖြစ်စေချင်တယ် ဒါမှမဟုတ် အမှန်တရားမှာ eu ခုခံအားစနစ်ရဲ့ နာကျင်မှုကို ခံစားနေရတာ၊ စားသုံးသူနှင့် zzril ၏ပုံမှန်မုန်းတီးမှု။ ကျွန်ုပ်တို့၏ ဆယ်ကျော်သက်များမှ လွတ်မြောက်လာသောအခါ အားလပ်ချိန်သည် ရွေးချယ်စရာမရှိပေ။
CSS Multi-column Properties
ဤအခန်းတွင် အောက်ပါ ကော်လံပေါင်းများစွာ၏ ဂုဏ်သတ္တိများအကြောင်း လေ့လာနိုင်ပါမည်-
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
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 pixels ကွာဟချက်ကို သတ်မှတ်သည်-
ဥပမာ
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
ကော်လံ-စည်းမျဉ်း-* ဂုဏ်သတ္တိများအားလုံးကို သတ်မှတ်ရန်အတွက် အတိုကောက် ပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည်။
အောက်ပါဥပမာသည် ကော်လံများကြားတွင် စည်းကမ်း၏ အကျယ်၊ ပုံစံနှင့် အရောင်ကို သတ်မှတ်သည်-
ဥပမာ
div
{
column-rule: 1px solid lightblue;
}
ဒြပ်စင်တစ်ခုအား ကော်လံမည်မျှချဲ့ရမည်ကို သတ်မှတ်ပါ။
ပစ္စည်း column-span
တစ်ခုသည် ကော်လံမည်မျှကို ဖြတ်ကျော်ရမည်ကို သတ်မှတ်ပေးသည်။
အောက်ဖော်ပြပါ ဥပမာတွင် <h2> ဒြပ်စင်သည် ကော်လံများအားလုံးတွင် ကျယ်သင့်သည်ဟု သတ်မှတ်သည်-
ဥပမာ
h2 {
column-span: all;
}
ကော်လံအကျယ်ကို သတ်မှတ်ပါ။
ပိုင်ဆိုင်မှု သည် column-width
ကော်လံများအတွက် အကြံပြုထားသော၊ အသင့်တော်ဆုံး အကျယ်ကို သတ်မှတ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် ကော်လံများအတွက် အကြံပြုထားသော၊ အကောင်းဆုံး အကျယ်သည် 100px ဖြစ်သင့်သည်ဟု သတ်မှတ်သည်-
ဥပမာ
div {
column-width: 100px;
}
CSS Multi-columns Properties
အောက်ပါဇယားသည် ကော်လံပေါင်းများစွာ၏ ဂုဏ်သတ္တိအားလုံးကို ဖော်ပြသည်-
Property | Description |
---|---|
column-count | Specifies the number of columns an element should be divided into |
column-fill | Specifies how to fill columns |
column-gap | Specifies the gap between the columns |
column-rule | A shorthand property for setting all the column-rule-* properties |
column-rule-color | Specifies the color of the rule between columns |
column-rule-style | Specifies the style of the rule between columns |
column-rule-width | Specifies the width of the rule between columns |
column-span | Specifies how many columns an element should span across |
column-width | Specifies a suggested, optimal width for the columns |
columns | A shorthand property for setting column-width and column-count |