ပုံပြားများကို ဆက်တိုက် ပြောင်းလဲ ပြုံ့ပြုပါ。

ပုံပြားများကို ဆက်တိုက် ပြောင်းလဲ ရုပ်ရှင်မှူးကို အသုံးပြုခြင်း လေ့လာကြည်းပါ。

ပေါက်ကြား ပုံခွဲ ပြုလုပ်

ပထမအပ် - ဟေတိုး ပြင်ဆင်

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

ဒုတိယအပ် - စတီယူ ကို ပြင်ဆင်

စတီယူ ကို အသုံးပြုခြင်း float အချက်အလက် နှင့် ပေါင်းစပ်

အပြန်အလွှမ်း

/* သုံးလုံး အကွက် သို့မဟုတ် လေးလုံး အကွက် သို့မဟုတ် နှစ်လုံး အကွက် အတူ ပြောင်းလဲ လိမ့်မည် */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* ပုံခွဲ အကွက် ပြီးတော့ အောက်ပါ အပုံအချက် ကို သိမ်းသွင်း */
.row::after {
  content: "";
  clear: both;
  display: table;
}

ကျွန်ုပ်တို့ ကျမ်းသစ် ကို ဖတ်မဲ့

စတီယူ ကို အသုံးပြုခြင်း flex အချက်အလက် နှင့် ပေါင်းစပ်

ဖရဲကိုက် အကျိုးသတ်

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

ကျွန်ုပ်တို့ ကျမ်းသစ် ကို ဖတ်မဲ့

အကြောင်းကြားဖရဲကိုက် ကို အင်တာနက် အင်တာရပ် အမျိုးသမီး အပိုင်း ၁၀ နှင့် အရှိန် အထိ ကူညီ လိမ့်မည်

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

အပြန်အလွှမ်း ကျသော ပုံခွဲ ကို အတူ သို့မဟုတ် ပေါ်ပေါ် ပေါ်ပေါ် တွဲကာ မဟုတ် သို့မဟုတ် အတူ တွဲကာ သဘော ပြောင်းလဲ လိမ့်မည်

သို့တည်းမဟုတ်

အောက်ပါ အမှတ်အသား အိမ်ရွာလက်ပွား အရ 500px အထိ သို့မဟုတ် နည်းပါးသော အိမ်ရွာလက်ပွား ပေါ်မှ ယောက်ျားကြီး အရွယ် သို့မဟုတ် နည်းပါးသော အရွယ် ကို အိမ်ရွာလက်ပွား အတွင်း လျှင် လျှောက်သွားသည်

အပြန်အလွှမ်း အကျိုးသတ်

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

ကျွန်ုပ်တို့ ကျမ်းသစ် ကို ဖတ်မဲ့

မီဒီယူ ကျမ်းသစ် အကြောင်းကျသော သတင်း နှင့် သို့မဟုတ် စတီယူ မီဒီယူ ကျမ်းသစ်。

ပြင်ပ စာမျက်နှာ

ကျမ်းသစ်CSS 图像

ကျမ်းသစ်စတီယူ ဝိုက်ပီ

ကျမ်းသစ်CSS 图片库