လုပ်နည်း - Column Layout နှစ်ခု
CSS ဖြင့် ကော်လံ 2 ကွက်ကွက်ကွက် ဖန်တီးနည်းကို လေ့လာပါ။
ကော်လံ ၁
စာသားတစ်ချို့..
ကော်လံ ၂
စာသားတစ်ချို့..
Column Layout နှစ်ခုဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="row">
<div class="column"></div>
<div
class="column"></div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် တူညီသော ကော်လံ နှစ်ခုကို ဖန်တီးပါမည် ။
Float ဥပမာ
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
ကော်လံနှစ်ခုဖန်တီးခြင်း၏ ခေတ်မီနည်းလမ်းမှာ CSS Flexbox ကို အသုံးပြုခြင်း ဖြစ်သည်။ သို့သော်လည်း ၎င်းကို Internet Explorer 10 နှင့် အစောပိုင်းဗားရှင်းများတွင် မပံ့ပိုးပါ။
Flex ဥပမာ
.row {
display: flex;
}
.column {
flex: 50%;
}
floats သို့မဟုတ် flex ကိုအသုံးပြုလိုပါက ကော်လံနှစ်ခုပါသော အပြင်အဆင်ကိုဖန်တီးရန် သင့်အပေါ်တွင်ရှိသည်။ သို့သော် သင်သည် IE10 နှင့် အောက်များအတွက် ပံ့ပိုးမှု လိုအပ်ပါက သင်သည် float ကို အသုံးပြုသင့်သည်။
အကြံပြုချက်- Flexible Box Layout Module အကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Flexbox အခန်းကို ဖတ်ရှုပါ ။
ဤဥပမာတွင်၊ မညီမျှသော ကော်လံ နှစ်ခုကို ဖန်တီးပါမည် ။
ဥပမာ
.column {
float: left;
}
.left {
width: 25%;
}
.right {
width: 75%;
}
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် တုံ့ပြန်မှု ရှိသော ကော်လံနှစ်ခုကို ဖန်တီးပေးမည်-
ဥပမာ
/* Responsive layout - when the screen is less than 600px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
အကြံပြုချက်- ဝဘ်ဆိုဒ်အပြင်အဆင်များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS ဝဘ်ဆိုဒ် အပြင်အဆင် ကျူတိုရီရယ်သို့ သွားပါ ။
အကြံပြုချက်- တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းနှင့် ဂရစ်များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS တုံ့ပြန်မှု ဝဘ်ဒီဇိုင်း ကျူတိုရီရယ်သို့ သွားပါ ။