如何创建：等高列

学习如何使用 CSS 创建等高列。

如何创建等高列

当您的列应并排显示时，您通常会希望它们具有相同的高度（与最高的高度匹配）。

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

ပထမအစိုင်း - HTML ထပ်ထည့်ပါ:

<div class="col-container">
  <div class="col">
    <h2>အစိတ်အပျက် ၁</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>အစိတ်အပျက် ၂</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>အစိတ်အပျက် ၃</h2>
    <p>အခြား စကားလုံးများ...</p>
    <p>အခြား စကားလုံးများ...</p>
  </div>
</div>

ဒုတိယအစိုင်း - CSS ထပ်ထည့်ပါ:

.col-container {
  display: table; /* အကွန်းအဖွဲ့ အရာများ အပြင်းအထန် အချက်အလက် ပြုလုပ်ရန် */
  width: ၁၀၀%; /* အကွန်းအဖွဲ့ အနည်းငယ် ဖြင့် ပျံ့နှံ့လာစေရန် အပြည်းအဝါ ဖြင့် သတ်မှတ်ပါ */
}
.col {
  display: table-cell; /* အကွန်းအဖွဲ့အတွင်းရှိ အရာများ အပြင်းအထန် အချက်အလက် ပြုလုပ်ရန် */
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

အတိုင်းအတာ အမြင့်တူ

ကျွန်ုပ်တို့ ပြီးခဲ့သော အကြိမ်ဖြစ် အစိတ်အပျက် များ အတိုင်းအတာ အပြန်အလွှာ ပြုလုပ်ထားပါသည် (အဆိုပါ အကြိမ်ဖြစ် အစိတ်အပျက် အခြေအနေ ကို ဘွတ်စ်ဆင်း ဝတ္ထု အခြေအနေ ကို ပြင်ဆင်လျှင် သင်သား ကျွန်ုပ်တို့ အတိုင်းအတာ ပြန်အလွှာ ဖြစ်လာသည်)၊ သို့သော် အကြီးအကျယ် အင်တာနက်ပေါင်းစား (အဆိုပါအချိန် အင်တာနက်ပေါင်းစား ဝတ္ထု အခြေအနေ အကြီးအကျယ်) အတွက် သင်သား သည် အကွန်းအဖွဲ့များ အစိတ်အပျက် အတိုင်း ဖြစ်လာချေ သင့်ပါ။

ထိုသို့ ရန် သတင်းထုတ်ရာ မီဒီယာကို ထပ်ထည့်ပြီး ထိုအချိန် ပြောင်းလဲကြောင်း သတ်မှတ်ပါ:

အကြိမ်ဖြစ်

/* ဘွတ်စ်ဆင်း ဝတ္ထု အခြေအနေ ၆၀၀ ပမာဏ ထက် သေးနည်းကြောင်း ဖြစ်လျှင် အစိတ်အပျက် ပြုလုပ်ပါ */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: ၁၀၀%;
  }
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

Flexbox ကို အမြင့်တူသော နှင့် အကွက်တူသော အကွန်းအဖွဲ့များ ဖန်တီးရန်

ကျွန်ုပ် လည်း Flexbox ကို အသုံးပြု၍ အမြင့်တူသော အကွန်းအဖွဲ့များ ကို ဖန်တီးနိုင်ပါသည်:

အကြိမ်ဖြစ်

.col-container {
  display: flex;
  width: ၁၀၀%;
}
.col {
  flex: ၁;
  ပေါက်လှန်း: ၁၆ ပမာဏ;
}

ကိုယ်တိုင် ကိုယ်တိုင် ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

သတိပြုသည်:အင်တာနက် အစီအစဉ် ၁၀ နှင့် အနည်းငယ်သော အစီအစဉ်များတွင် Flexbox ကို ထောက်ပံ့ခြင်း မရှိပါ။

相关页面

教程：CSS Flexbox