如何创建:分屏(1/2)
学习如何使用 CSS 创建分屏(50/50)效果。
如何创建分屏
第一步 - 添加 HTML:
![]()
Jane Flex
Some text.
![]()
Bill Gates
Some text here too.
第二步 - 添加 CSS:
/* 将屏幕一分为二 */ .split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } /* ဘယ်သည့်နည်းဖြင့် အရှေ့ဘက် ကို တွန်းပြောင်းသည် */ .left { left: 0; background-color: #111; } /* ဘယ်သည့်နည်းဖြင့် အမြောက်အရှည် ဘက် ကို တွန်းပြောင်းသည် */ .right { right: 0; background-color: red; } /* အရေးကြီးသော အခါ အကျွန်းစား အကွင်းအတွင်း ပုံပြင် အထူးအောက်ခံအုပ်အုပ်ခြင်း ကို ကိုင်တွယ်ပြီ */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } /* တွင်းရှိ ပုံပြင် အထူးအောက်ခံအုပ်အုပ်ခြင်း ကို စတင်ကြိုးပမ်းသည် */ .centered img { width: 150px; border-radius: 50%; }