ဖွဲ့စည်းခြင်း: နှစ်လုံး ဝတ်ဆိုင်

နှစ်လုံး ဝတ်ဆိုင် ဖွဲ့စည်းခြင်း

ပထမပိုင်း - ဝတ်ဆိုင် ထပ်ထည့်ခြင်း

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

ဒုတိယပိုင်း - စတုံးစက် ဝတ်ဆိုင် ထပ်ထည့်ခြင်း

ဌာနအပြင်းအပြင်း

အပြင်းထု ဌာန

.column {
  float: left;
  width: 50%;
}
/* လုံးခွဲသော အပြင်းထု အပေါ်တွင် အပြင်းထု အပေါ်တွင် အပြင်းထု အပေါ်တွင် */
.row:after {
  content: "";
  display: table;
  clear: both;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ချင်

နှစ်လုံး ဝတ်ဆိုင် အဖြစ် အသုံးပြုကြသော ယခုအခါ နည်းလမ်း ဖြစ်သည်။ သို့သော် အင်တာနက် အသုံးပြုကြသော အကျယ်အဝန် အောက်တွင် ထိမ်းသိမ်းလိုက်သင့်သည်များ ဖြစ်သည်။

Flex ဌာန

.row {
  display: flex;
}
.column {
  flex: 50%;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ချင်

သင်သည် အပြင်းထု ဝတ်ဆိုင် သို့မဟုတ် အလွှာအပြင်းထု ဝတ်ဆိုင် ကို သုံးနိုင်သည်များ ဖြစ်သည်။ သို့သော် သင်သည် IE10 အောက်တွင် ထိမ်းသိမ်းလိုက်သင့်သည်များ ဖြစ်သည်များ ဖြစ်သည်။

အကြံပေးFlexible Box Layout Module နှင့် ပတ်သတ်သော အသေးစိတ်အချက်အလက် နှင့် ပတ်သတ်သော အချက်အလက် သို့ ကြည့်ရှုချင်လျှင် ကျမ်းကို ဖတ်ချင် စတုံးစက် အရင်းအမြစ် ဝတ်ဆိုင်。

ဌာန

ဌာန

.column {
  float: left;
}
.left {
  အကျယ်အဝန်: 25%;
}
.right {
  အကျယ်အဝန်: 75%;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ချင်

ဌာနအရင်းအမြစ်နှစ်လုံး ဝတ်ဆိုင်

ဌာန

/* အရင်းအမြစ် ဝတ်ဆိုင် - အကျယ်အဝန် 600ပေါက်ကျော် ဖြစ်ချင်း နှစ်လုံး အပြင်းထု အပေါ်တွင် အစားထိုး လို့ မပြုတော့ တော့ အပေါ်တွင် အပေါ်တွင် အပေါ်တွင် */
@media screen and (max-width: 600px) {
  .column {
    အကျယ်အဝန်: 100%;
  }
}

ကိုယ်တိုင် ကြိုးစားကြည့်ချင်

ကိုယ်စားပြုရာ

ပါးခွဲစားCSS 网站布局

ပါးခွဲစားစတုံးစက် အရင်းအမြစ် ဝတ်ကျောင်း ဝတ်ဆိုင်