column-width ဂုဏ်သတ္တိ

column-width ဂုဏ်သတ္တိသည် အများကော်လံစာသားတွင် ကော်လံများ၏အကျယ်ကို သတ်မှတ်ပေးသည်။ ဂုဏ်သတ္တိ၏တန်ဖိုးမှာ အရွယ်အစားများအတွက် ယူနစ်များ (ရာခိုင်နှုန်းမှလွဲ၍) သို့မဟုတ် သော့ချက်စကားလုံး auto (စံထားချက်) ဖြစ်သည်။ တန်ဖိုး auto တွင် ဘရောက်ဆာသည် column-count နှင့် column-gap အပေါ် အခြေခံ၍ ကော်လံများ၏ အကောင်းဆုံးအကျယ်ကို သူ့ဘာသာ ရွေးချယ်သည်။

ဝါကျဖွဲ့စည်းပုံ

cssရွေးချယ်သူ {
  column-width: တန်ဖိုး;
}

နမူနာ . သတ်မှတ်ထားသောအကျယ်

ဤနမူနာတွင် ကော်လံ၏အကျယ် column-width ကို 150px ဟု သတ်မှတ်ထားပြီး ၎င်းတို့၏အရေအတွက် column-count ကို တန်ဖိုး auto တွင်ထားသည်။ ရလဒ်အဖြစ် ကော်လံများ၏အကျယ်မှာ 150px ဖြစ်မည်၊ ၎င်းတို့၏အရေအတွက်နှင့် ၎င်းတို့ကြားရှိ ကြားအကွာအဝေးကို ဘရောက်ဆာက သူ့ဘာသာ ရွေးချယ်မည်။

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

နမူနာ . auto တန်ဖိုး

ဤနမူနာတွင် စာသားသည် 3 ကော်လံခွဲမည် (အဘယ်ကြောင့်ဆိုသော် column-width ကို တန်ဖိုး 3 တွင် ထားသောကြောင့်)၊ သို့သော် ၎င်းတို့၏အကျယ်ကို အလိုအလျောက်တွက်ချက်မည်။

html<div id="elem">
  some long text
</div>

css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ