တစ်လျှောက် စီးစောင် အချက်အလက် ဖွဲ့စည်းပါ

တစ်လျှောက် စီးစောင် အချက်အလက်

သင် စီးပွားရေး ကို သုံးပါ float တစ်လျှောက် စီးစောင် အချက်အလက် ဖွဲ့စည်းပါ:

အကျိုးသက်

* {
  box-sizing: border-box;
}
/* နှစ်လျှောက် စီးစောင် ဖွဲ့စည်းပါ */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix（အကျီးကျီး ဖျက်သိမ်း） */
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

သင် စီးပွားရေး ကို သုံးပါ flex တစ်လျှောက် စီးစောင် အချက်အလက် ဖွဲ့စည်းပါ:

အကျိုးသက်

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

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

အကြောင်းကြားFlexbox သည် အီးအိုင်အီး 10 ပြီ အောက် မျိုး နှင့် အတူ မမြတ်တော်မူပါ။ သင် သုံးပါ သလား? float သို့မဟုတ် flex သင့် စိတ်ဝင်စား ကြောင်း ဖြစ်သည်။ သို့သော် သင် အီးအိုင်အီး 10 ပြီ အောက် မျိုး ကို လုပ်ဆောင် သင့် လျှင် သင် သုံးပါ: float.

အကြောင်းကြားFlexible Box ပြောင်းလဲကြောင်း အသိသိသာသာ နှင့် ပတ်သတ် သော အချက်အလက် အသိပေတမ်း ကြည့်ရန် ကျမ်းကို ဖတ်ပါ: CSS Flexbox ဖော်ပြ.

အဝေးကျ အကျိုး

အထို အစားအသား သည် ကွန်ပျူတာ ပေါ်တွင် လူကြီးသော အရွယ် ဖြစ်ပေါ်စေသည်။ နှစ်လျှောက် စီးစောင် သည် စာမျက်နှာ အချိုး အချဲ့ ပေါ်တွင် အချိုး အချဲ့ ဖြစ်ပေါ်စေသည်。

အဝေးကျ အချက်အလက် ရှိ အခါ တွင် နှစ်လျှောက် စီးစောင် ဖြစ်ပေါ်စေရန် အဝေးကျ အချက်အလက် ထပ်ထည့်ပါ:

အကျိုးသက်

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

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

ပါဝင်သော စာမျက်နှာ

教程：CSS 表格

教程：CSS 浮动

教程：CSS Flexbox