လုပ်နည်း - ညီမျှသောအမြင့်
CSS ဖြင့် တူညီသော အမြင့်ကော်လံများ ဖန်တီးနည်းကို လေ့လာပါ။
တူညီသောအမြင့်ကော်လံများဖန်တီးနည်း
ဘေးချင်းကပ်လျက် ပေါ်လာမည့် ကော်လံများ ရှိပါက ၎င်းတို့ကို တူညီသော အမြင့် (အမြင့်ဆုံး၏ အမြင့်နှင့် ကိုက်ညီသည်) ဖြစ်စေချင်ပါသည်။
ပြဿနာ:
ဆန္ဒ:
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
တုံ့ပြန်မှု ညီမျှသော အမြင့်
ယခင်နမူနာတွင် ပြုလုပ်ထားသော ကော်လံများသည် တုံ့ပြန်မှုဖြစ်သည် (စမ်းသုံးကြည့်ပါက နမူနာတွင် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါက လိုအပ်သော အကျယ်နှင့် အမြင့်သို့ အလိုအလျောက် ချိန်ညှိသည်ကို တွေ့ရလိမ့်မည်)။ သို့သော်၊ သေးငယ်သောစခရင်များ (စမတ်ဖုန်းများကဲ့သို့) အတွက် ၎င်းတို့ကို အလျားလိုက်အစား ဒေါင်လိုက် တန်းစီထားစေလိုပေမည်။
အလတ်စားနှင့် ကြီးမားသော စခရင်များတွင်-
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
သေးငယ်သော စခရင်များတွင်
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
မင်္ဂလာပါကမ္ဘာလောက။
၎င်းကိုအောင်မြင်ရန်၊ မီဒီယာမေးမြန်းချက်တစ်ခုထည့်ကာ ၎င်းဖြစ်သင့်သည့်အချိန်အတွက် breakpoint pixel တန်ဖိုးကို သတ်မှတ်ပါ-
ဥပမာ
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Flexbox ကို အသုံးပြု၍ တူညီသော အမြင့်နှင့် အနံ
တူညီသော အမြင့်ဘောက်စ်များကို ဖန်တီးရန် Flexbox ကို အသုံးပြုနိုင်သည်။
ဥပမာ
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
မှတ်ချက်- Flexbox ကို Internet Explorer 10 နှင့် အစောပိုင်းဗားရှင်းများတွင် ပံ့ပိုးမထားပါ။
အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Flexbox ကျူတိုရီရယ် တွင် ပြောင်းလွယ်ပြင်လွယ်ရှိသော အကွက်များအကြောင်း ပိုမိုဖတ်ရှုပါ ။