လုပ်နည်း - Mixed Column Layout
CSS ဖြင့် ကော်လံပုံစံဇယားကွက် ရောစပ်ဖန်တီးနည်းကို လေ့လာပါ။
မျက်နှာပြင်အကျယ်ပေါ် မူတည်၍ ကော်လံ 4 ကော်လံ၊ ကော်လံ 2 ခုနှင့် မျက်နှာပြင်အကျယ်ပေါ် မူတည်၍ အကျယ်အဝန်းကွဲပြားသည့် တုံ့ပြန်မှုကော်လံအပြင်အဆင်ကို ဖန်တီးနည်းကို လေ့လာပါ။
တုံ့ပြန်မှုအကျိုးသက်ရောက်မှုကိုကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစား ပြောင်းပါ-
Mixed Column Layout ဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် 900px ထက်နည်းသော စခရင်များရှိ ကော်လံနှစ်ခုအဖြစ် ပြောင်းလဲမည့် ကော်လံလေးခုကို ဖန်တီးပါမည်။ သို့သော်၊ အကျယ် 600px အောက်ရှိသော ဖန်သားပြင်များတွင်၊ ကော်လံများသည် တစ်ခုနှင့်တစ်ခု ဘေးတွင် လွင့်နေမည့်အစား တစ်ခုနှင့်တစ်ခု အပေါ်ထပ်တွင် ထပ်နေပါမည်။
ဥပမာ
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes 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 တုံ့ပြန်မှု ဝဘ်ဒီဇိုင်း ကျူတိုရီရယ်သို့ သွားပါ ။