လုပ်နည်း - ဘေးချင်းကပ် ဇယားများ
CSS ဖြင့် ဘေးချင်းကပ်ဇယားများ ဖန်တီးနည်းကို လေ့လာပါ။
စားပွဲတွေကို ဘေးချင်းကပ် ဘယ်လိုထားမလဲ။
floatCSS ပိုင်ဆိုင်မှု ဖြင့် ဘေးချင်းကပ်ဇယားများကို ဖန်တီးနည်း -
ဥပမာ
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
flexCSS ပိုင်ဆိုင်မှု ဖြင့် ဘေးချင်းကပ်ဇယားများကို ဖန်တီးနည်း -
ဥပမာ
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
မှတ်ချက်- Flexbox ကို Internet Explorer 10 နှင့် အစောပိုင်းဗားရှင်းများတွင် ပံ့ပိုးမထားပါ။ floats သို့မဟုတ် flex ကိုအသုံးပြုလိုပါက သင့်အပေါ်တွင် မူတည်သည်။ သို့သော် သင်သည် IE10 နှင့် အောက်များအတွက် ပံ့ပိုးမှု လိုအပ်ပါက သင်သည် float ကို အသုံးပြုသင့်သည်။
အကြံပြုချက်- Flexible Box Layout Module အကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Flexbox အခန်းကို ဖတ်ရှုပါ ။
တုံ့ပြန်မှုထည့်ပါ။
ကော်လံနှစ်ခုသည် စာမျက်နှာ၏နေရာအလွန်အကျွံယူမည်ဖြစ်သောကြောင့် အထက်ဖော်ပြပါဥပမာသည် မိုဘိုင်းစက်ပစ္စည်းတစ်ခုတွင် မကောင်းပါ။ တုံ့ပြန်မှုရှိသော ဇယားတစ်ခုကို ဖန်တီးရန်၊ ၎င်းသည် ကော်လံနှစ်ခုအပြင်အဆင်မှ မိုဘိုင်းစက်ပစ္စည်းများရှိ အကျယ်အဝန်းအပြည့် အပြင်အဆင်သို့သွားသင့်သည်၊ အောက်ပါမီဒီယာမေးခွန်းများကို ထည့်ပါ။
ဥပမာ
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
အကြံပြုချက်- ဇယား များကို ပုံစံသွင်းပုံအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Tables Tutorial သို့ သွားပါ ။
အကြံပြုချက်- float ပိုင်ဆိုင်မှုအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Float Tutorial သို့ သွားပါ ။
အကြံပြုချက်- flex ပိုင်ဆိုင်မှုအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Flexbox ကျူတိုရီရယ် သို့ သွားပါ ။