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

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

ဝါကျဖွဲ့ပုံ

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

ဥပမာ

ဤဥပမာတွင် ကော်လံအရေအတွက် column-count (3 ခု) နှင့် ၎င်းတို့ကြားရှိ ကွက်လပ်အကွာ column-gap ကို 50px အဖြစ် သတ်မှတ်ထားပါသည်။ ကော်လံများ၏အကျယ်ကိုမူ ဤသတ်မှတ်ချက်များကို ဖြည့်ဆည်းနိုင်ရန် (ကော်လံအရေအတွက်နှင့် ၎င်းတို့ကြားအကွာအဝေးကို) အလိုအလျောက် ညှိပေးပါမည်။

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

css#elem {
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

ဥပမာ . normal တန်ဖိုး

ဤဥပမာတွင် ကော်လံတစ်ခု၏အကျယ် column-width ကို 150px၊ ၎င်းတို့၏ အရေအတွက် column-count ကို auto တန်ဖိုးအဖြစ်၊ ကွက်လပ်အကွာ column-gap ကိုမူ normal တန်ဖိုးအဖြစ် သတ်မှတ်ထားပါသည်။ ထို့ကြောင့် ဘရောင်ဇာသည် လိုအပ်သော ကော်လံအရေအတွက်နှင့် ၎င်းတို့ကြားရှိ ကွက်လပ်အကွာကို သူ့ဘာသာ ရွေးချယ်ပေးပါမည် (သို့သော် ၎င်းတို့၏အကျယ်မှာ 150px ဖြစ်ပါမည်)။

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

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

Результат:

ဥပမာ

ဂရစ်တွင် ကော်လံများကြား အကွာအဝေးကို သတ်မှတ်ကြည့်ရအောင်။

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

ဥပမာ

ယခု ကော်လံများကြား အကွာအဝေးကို % ဖြင့် သတ်မှတ်ကြည့်ရအောင်။

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 5%;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

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