Web ကို 's Page Layout များဒီဇိုင်းရေးဆွဲရန် CSS ကို float Property ကို
အဆိုပါ CSS ကိုပိုင်ဆိုင်မှု layout ကိုများအတွက်အလွန်အရေးကြီးသောပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုဖြစ်ပါတယ်။ ဒါဟာသူတို့ကိုသင်ဖော်ပြရန်-ပေမယ်ချင်အသုံးပြုရန်နိုင်ရန်အတွက်သင်ကဘယ်လိုအလုပ်လုပ်တယ်ဆိုတာကိုနားလည်ရန်ရှိသည်အတိအကျအဖြစ်သင်သည်သင်၏ဝဘ်စာမျက်နှာဒီဇိုင်းများကိုနေရာချခြင်းမှခွင့်ပြုပါတယ်။
ကတော့ style sheet မှာ CSS ကို float property ကဒီတူ:
.right {float: ခွင့်, }
ဤ "ညာဘက်" ၏အတန်းနှင့်အတူအရာအားလုံးကိုညာဘက်မြောသင့်ကြောင်းအဆိုပါ browser ကိုပြောပြသည်။
သငျသညျဤကဲ့သို့သောသူက assign မယ်လို့:
အတန်းအစား = "ညာဘက်" />
သင်က CSS ကို float အိမ်ခြံမြေနှငျ့အဘယျ Float လုပ်မလဲနိုင်သလား?
သင်တစ်ဦးကို web စာမျက်နှာပေါ်တွင်နေ့စဉ်ဒြပ်စင်ကို float မပေးနိုငျသညျ။ သင်သာ float နိုင်ပါတယ် ပိတ်ပင်တားဆီးမှု-Level ဒြပ်စင်။ ဤရွေ့ကား) ((ပုံကဲ့သို့), အပိုဒ် (), သင်းဖွဲ့ () နှင့်စာရင်းဟာစာမျက်နှာပေါ်တွင်နေရာလွတ်တစ်ခုပိတ်ပင်တားဆီးမှုကိုတက်ယူသောဒြပ်စင်များဖြစ်ကြသည်။
အခြားအကိုစာသားကိုထိခိုက်သော Element, ဒါပေမယ့်စာမကျြနှာပျေါမှာ box ကိုဖန်တီးမပေးပါဘူးဟုခေါ်ကြသည် inline element တွေ နဲ့မြောမရနိုင်ပါ။ ဤရွေ့ကား) (span နဲ့တူဒြပ်စင် () လိုင်းအားလပ်ချိန် (), ခိုင်မာတဲ့အလေးပေး (), ဒါမှမဟုတ်စာလုံးစောင်းဖြစ်ကြသည်။
သူတို့ကဘယ်မှာ Float လုပ်မလဲသလား?
သင်သည်လက်ျာသို့မဟုတ်လက်ဝဲမှဒြပ်စင် float နိုင်ပါတယ်။ အဆိုပါမြောဒြပ်စင်အောက်ပါအတိုင်းဆိုဒြပ်စင်အခြားဘက်ခြမ်းအပေါ် float ဒြပ်စင်ပတ်ပတ်လည်စီးဆင်းလိမ့်မယ်။
ငါသည်လက်ဝဲဘက်သို့ပုံတစ်ပုံကို float လျှင်ဥပမာ, မည်သည့်စာသားသို့မဟုတ်အခြားသောဒြပ်စင်များပါကညာဘက်ပတ်လည်စီးဆင်းနေမည်အောက်ပါ။ ထိုအခါငါလက်ျာဘက်, မည်သည့်စာသားသို့မဟုတ်ပါကဘယ်ဘက်ကိုလှည့်ပတ်စီးဆင်းလိမ့်မယ်အောက်ပါအခြားဒြပ်စင်တစ်ခု image ကို float လျှင်။ browser ကိုရုပ်ပုံများကိုဖော်ပြရန်သတ်မှတ်သို့သော်အဲဒါကိုလျှောက်ထားမည်သည့်နှုန်းရှင်မျှောစတိုင်မပါဘဲစာသားတစ်ဘလောက်ထဲမှာထည့်ထားကြောင်းပုံရိပ်တစ်ခုပြပေးလိမ့်မယ်။
ဒါကပုံရဲ့အောက်ခြေမှာပြသအောက်ပါစာသားကို၏ပထမဦးဆုံးလိုင်းနှင့်အတူပုံမှန်အားဖြင့်ဖြစ်ပါသည်။
သူတို့ကဘယ်လိုဝေး Float လုပ်မလဲတော်မူမည်လော
ပြီ Element တစ်ခုရဲ့ မြော ကနိုင်သကဲ့သို့ကွန်တိန်နာဒြပ်စင်၏ဘယ်ဖက်သို့မဟုတ်ညာဖက်အဖြစ်ဝေးရွှေ့မည်။ ဒါဟာသင့်ရဲ့ကုဒ်တိကျမ်းစာ၌လာသည်ကားကိုဘယ်လိုပေါ် မူတည်. အများအပြားကွဲပြားခြားနားသောအခြေအနေများတွင်ရလဒ်များ။
ဤဥပမာအဘို့, ငါဘယ်ဘက်ကိုသေးငယ်တဲ့ div element ကို floating လိမ့်မည်:
- အဆိုပါမြောဒြပ်စင်တစ်ဦး Pre-defined အကျယ်ရှိသည်မဟုတ်ပါဘူးဆိုရင်, ကမသက်ဆိုင်ကတော့ float ၏, လိုအပ်သောသလောက်အလျားလိုက်အာကာသကိုတက် ယူ. မရရှိနိုင်ပါလိမ့်မယ်။ မှတ်ချက်: အချို့ browser များရဲ့ width non-float ဒြပ်စင်အာကာသသာသေးငယ်တဲ့ငွေပမာဏကိုပေးကမ်း-များသောအားဖြင့်သတ်မှတ်ပါတယ်မဟုတ်သောအခါအနားမှာဒြပ်စင်မြောဒြပ်စင်ထားပါကြိုးစား။ ဒါကြောင့်သင်အမြဲ float ဒြပ်စင်အပေါ်တစ်ဦး width ကိုသတ်မှတ်သင့်ပါတယ်။
- ကွန်တိန်နာ element က HTML element ဖြစ်ပါတယ်လျှင်, မြော div စာမျက်နှာ၏လက်ဝဲအနားသတ်ပေါ်မှာထိုင်ပါလိမ့်မယ်။
- ကွန်တိန်နာဒြပ်စင်အခြားအရာတစ်ခုခုအားဖြင့်ပါရှိသောသူ့ဟာသူဖြစ်ပါတယ်လျှင်, မြော div ကွန်တိန်နာ၏လက်ဝဲအနားသတ်ပေါ်မှာထိုင်ပါလိမ့်မယ်။
- သငျသညျအသိုက်ဒြပ်စင်မြောနိုင်ပြီး, တစ်ဦးအံ့အားသင့်စရာအရပျ၌တက်အဆုံးသတ်ကတော့ float ဖြစ်ပေါ်နိုင်ပါတယ်။ ဥပမာ, ဒီ float တစ်ဦးဘယ်ဖက်လက်မြော div အတွင်းပိုင်း div မြောဖြစ်ပါတယ်။
- ကွန်တိန်နာအတွင်းအခန်းတစ်ခန်းရှိလြှငျ float element တွေကိုလာမယ့်တစ်ဦးချင်းစီကတခြားမှထိုင်ပါလိမ့်မယ်။ ဥပမာ, ဒီကွန်တိန်နာတစ်ဦး 400px ကျယ်ပြန့်ကွန်တိန်နာထဲမှာမြောသုံး 100px ကျယ်ပြန့် div element တွေရှိပါတယ်။
သင်ပင်ဓာတ်ပုံပြခန်း layout ကိုဖန်တီးရန် float ကိုသုံးနိုင်သည်။ သင်ကစာတန်းနှင့်ကွန်တိန်နာအတွင်း float အဆိုပါ div element တွေနဲ့ div အတွက် (သူတို့အားလုံးတူအရွယ်အစားများမှာအခါအကောင်းဆုံးအလုပ်လုပ်တယ်) တစ်ဦးချင်းစီ thumbnail ကိုထားတော်မူ၏။
အဘယ်သူမျှမကိစ္စကို browser window ကိုဘယ်လောက်ကျယ်ပြန့်ခြင်း, ပုံငယ်များတစ်ပုံစံတည်းတန်းစီခိုင်းတယ်ပါလိမ့်မယ်။
အဆိုပါ Float ပိတ်ဖွင့်
သငျသညျကို float မှ Element တစ်ခုရဲ့ရဖို့ဘယ်လိုသိပြီးတာနဲ့က float ကို turn off ဖို့ဘယ်လိုသိရန်အရေးကြီးပါတယ်။ သင်က CSS ကိုရှင်းရှင်းလင်းလင်းပိုင်ဆိုင်မှုနှင့်အတူ float ကို turn off ။ သငျသညျ left float, ညာ float သို့မဟုတ်နှစ်ဦးစလုံးကိုရှင်းလင်းနိုင်သည်
ရှင်းရှင်းလင်းလင်း: left;
ရှင်းရှင်းလင်းလင်း: ခွင့်,
ရှင်းရှင်းလင်းလင်း: နှစ်ဦးစလုံး;
သင်သတ်မှတ်ထားကြောင်းမဆိုဒြပ်စင် ရှင်းလင်းသောပိုင်ဆိုင်မှု သည်ဦးတည်ချက်မြောကြောင်း Element တစ်ခုရဲ့အောက်တွင်ပေါ်လာပါလိမ့်မယ်။ ဥပမာ, ဒီဥပမာထဲမှာစာသားကို၏ပထမစာပိုဒ်နှစ်ခုရှင်းလင်းပေမယ့်တတိယဖြစ်ပါတယ်ကြသည်မဟုတ်။
ကွဲပြားခြားနားသော layout ကိုအကျိုးသက်ရောက်မှုများအရသင့်ရဲ့စာရွက်စာတမ်းများအတွက်ကွဲပြားခြားနားသောဒြပ်စင်ကြည်လင်သောတန်ဖိုး Play ။
စိတ်ဝင်စားစရာအကောင်းဆုံး float အပြင်အဆင်တစ်ခုမှာစာသားအပိုဒ်မှလာမယ့်လက်ျာသို့မဟုတ်လက်ဝဲကော်လံချပုံရိပ်တွေတစ်စီးရီးဖြစ်ပါတယ်။ စာသားပုံရိပ်ကိုအတိတ် scroll ဖို့လုံလောက်တဲ့တာရှည်မဖြစ်ရင်တောင်သင်သည်သူတို့ကော်လံထဲမှာပေါ်လာကြောင်းသေချာထက်အရင်ပုံရိပ်မှလာမယ့်လုပ်ရှိသမျှကိုပုံရိပ်တွေအပေါ်ရှင်းရှင်းလင်းလင်းကိုသုံးနိုင်သည်။
အဆိုပါ HTML ကို (ဒီအပိုဒ်ကိုပြန်လုပ်):
Duis aute irure ဒေါ်လိုရေစ် sed eiusmod voluptate အတွက် reprehenderit အတွက် incididunt ယာယီပါဘူး။ Cupidatat မဟုတ်တဲ့ proident, အလုပ်သမား et ဒေါ်လိုရေစ် Magna aliqua UT ။
(လက်ဝဲဖို့ပုံရိပ်တွေကို float မှ) အ CSS ကို:
img.float {float: left;
ရှင်းရှင်းလင်းလင်း: left;
margin: 5px;
}
နှင့်လက်ျာမှ:
img.float {float: ခွင့်,
ရှင်းရှင်းလင်းလင်း: ခွင့်,
margin: 5px;
}
Layout ဘို့ Float အသုံးပြုခြင်း
သငျသညျကတော့ float property ဘယ်လိုအလုပ်လုပ်တယ်ဆိုတာကိုနားလည်တစ်ပြိုင်နက်, သင်သည်သင်၏ဝဘ်စာမျက်နှာများကိုထွက် lay ကစတင်သုံးစွဲနိုင်ပါတယ်။ ဤရွေ့ကားငါမြောဝဘ်စာမျက်နှာကိုဖန်တီးရန်ယူခြေလှမ်းများနေသောခေါင်းစဉ်:
- (စာရွက်ပေါ်တွင်သို့မဟုတ်တစ်ဂရပ်ဖစ် tool ကိုဒါမှမဟုတ်ငါ့ဦးခေါင်းသည်ခုနှစ်) က layout ကိုဒီဇိုင်းရေးဆွဲပါ။
- စာမကျြနှာကွဲပြားမှုဖြစ်သွားကြသည်ဘယ်မှာဆုံးဖြတ်ပါ။
- အမျိုးမျိုးသောကွန်တိန်နာနှင့်သူတို့အတွင်းဒြပ်စင်များ၏ width ဆုံးဖြတ်ရန်။
- အရာအားလုံး float ။ ကဘရောက်ဇာကိုအမြင်ဆိပ်ကမ်းစပ်လျဉ်းဖြစ်လိမ့်မည်ဘယ်မှာငါသိသောကြောင့်ပင်ပြင်ဘက်မှာ, ကွန်တိန်နာ element ကလက်ဝဲမြောနေသည်။
နေသမျှကာလပတ်လုံးသင်သည်သင်၏အပြင်အဆင်အပိုင်းများ၏ width (ရာခိုင်နှုန်းဒဏ်ငွေဖြစ်ကြသည်) သိသည်အတိုင်း, သင်သူတို့စာမျက်နှာပေါ်တွင်ပိုင်ရှိရာသူတို့ကိုထားရန်ကတော့ float property ကိုသုံးနိုင်သည်။ ထိုအခါကောင်းတဲ့အရာ, သင်သေတ္တာမော်ဒယ်က Internet Explorer သို့မဟုတ် Firefox များအတွက်ကွဲပြားခြားနားသောဖြစ်ခြင်းအကြောင်းကိုတော့စိတ်ပူရန်မလိုပါဖြစ်ပါတယ်။