CSS ကျူတိုရီရယ်

CSS ပင်မစာမျက်နှာ CSS နိဒါန်း CSS Syntax CSS ရွေးချယ်မှုများ CSS လုပ်နည်း CSS မှတ်ချက်များ CSS အရောင်များ CSS နောက်ခံများ CSS နယ်နိမိတ်များ CSS အနားသတ်များ CSS Padding CSS အမြင့်/အနံ CSS Box မော်ဒယ် CSS အကြမ်းဖျင်း CSS စာသား CSS ဖောင့်များ CSS အိုင်ကွန်များ CSS လင့်ခ်များ CSS စာရင်းများ CSS ဇယားများ CSS Display CSS Max-အကျယ် CSS ရာထူး CSS Z အညွှန်း CSS Overflow CSS Float CSS Inline-block CSS ကို ချိန်ညှိပါ။ CSS Combinators CSS Pseudo-class CSS Pseudo-ဒြပ်စင် CSS Opacity CSS Navigation Bar CSS Dropdowns CSS ရုပ်ပုံပြခန်း CSS Image Sprites CSS Attr ရွေးချယ်မှုများ CSS ပုံစံများ CSS ကောင်တာများ CSS ဝဘ်ဆိုဒ် အပြင်အဆင် CSS ယူနစ်များ CSS တိကျမှု CSS !အရေးကြီးသည်။ CSS သင်္ချာလုပ်ဆောင်ချက်များ

CSS အဆင့်မြင့်

CSS Rounded Corners CSS Border ပုံများ CSS နောက်ခံများ CSS အရောင်များ CSS အရောင်သော့ချက်စာလုံးများ CSS Gradients CSS Shadows CSS စာသားအကျိုးသက်ရောက်မှုများ CSS ဝဘ်ဖောင့်များ CSS 2D အသွင်ပြောင်းမှုများ CSS 3D အသွင်ပြောင်းမှုများ CSS အသွင်ကူးပြောင်းမှုများ CSS Animations CSS Tooltips CSS စတိုင်ပုံများ CSS Image Reflection CSS object-fit CSS object-position CSS Masking CSS ခလုတ်များ CSS Pagination CSS ကော်လံမျိုးစုံ CSS User Interface CSS အပြောင်းအလဲများ CSS Box Sizing CSS မီဒီယာမေးခွန်းများ CSS MQ နမူနာများ CSS Flexbox

CSS တုံ့ပြန်မှု

RWD မိတ်ဆက် RWD Viewport RWD Grid View RWD မီဒီယာမေးခွန်းများ RWD ပုံများ RWD ဗီဒီယိုများ RWD မူဘောင်များ RWD နမူနာများ

CSS Grid

Grid Intro ဂရစ်ကွန်တိန်နာ ဇယားကွက်

CSS SASS

SASS ကျူတိုရီရယ်

CSS နမူနာများ

CSS Templates များ CSS နမူနာများ css စာမေးပွဲ CSS လေ့ကျင့်ခန်းများ CSS လက်မှတ်

CSS ကိုးကားချက်များ

CSS အကိုးအကား CSS ရွေးချယ်မှုများ CSS လုပ်ဆောင်ချက်များ CSS အကိုးအကား Aural CSS ဝဘ်ဘေးကင်းသောဖောင့်များ CSS Animatable CSS ယူနစ်များ CSS PX-EM Converter CSS အရောင်များ CSS အရောင်တန်ဖိုးများ CSS မူရင်းတန်ဖိုးများ CSS Browser ပံ့ပိုးမှု

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