တစ်ဦး Webpage ပေါ်စာသား၏လက်ဝဲဖို့ Image ကို Float လုပ်မလဲရန်ကဘယ်လို

by ဂျနီဖာ Kyrnin

တစ်ဦးဝက်ဘ်စာမျက်နှာ Layout ရဲ့ဘယ်ဘက်အခြမ်းမှပုံရိပ်တစ်ခု align ဖို့ CSS ကိုအသုံးပြုခြင်း

ယနေ့အချိန်တွင်နီးပါးမည်သည့်ဝက်ဘ်စာမျက်နှာကိုကြည့်ရှုနှင့်သင်စာသားနဲ့သူတို့အစာမကျြနှာများအမြောက်အများတက်အောင်ပုံရိပ်တွေပေါင်းစပ်မြင်လိမ့်မည်။ ဒါဟာစာသားနဲ့ add ရန်အလွန်လွယ်ကူသည် စာမျက်နှာမှပုံရိပ်များ ။ စာသားစံသုံးပြီး coded ဖြစ်ပါတယ် HTML တဂ် အဆိုပါပုံတွေကိုသုံးပြီးထည့်သွင်းနေစဉ်, အပိုဒ်, စာရင်းများနှင့်ခေါင်းစဉ်နဲ့တူ element က ။

စာသားနှင့်ထိုပုံရိပ်တွေကိုအတူတကွကောင်းမွန်စွာအလုပ်မလုပ်စေနိုင်စွမ်းဆိတ်ကွယ်ရာအကြီးက web ဒီဇိုင်နာများသတ်မှတ်အဘယျသို့ဖွစျသညျ! သင်ရုံကဤပုံကိုတည်းဟူသောသင်၏စာသားနဲ့ပုံရိပ်တွေကိုတခုပြီးတခုပေါ်လာချင်ကြပါဘူး ပိတ်ပင်တားဆီးမှု-Level element တွေကို ပုံမှန်အားဖြင့် layout ပါလိမ့်မယ်။ အဘယ်သူမျှမကသင်သည်စာသားနဲ့ပုံရိပ်တွေကိုနောက်ဆုံးမှာသင့်ရဲ့ website မှာရဲ့အမြင်အာရုံဒီဇိုင်းဖြစ်လတံ့သောအရာကိုအတွက်အတူတကွစီးဆင်းပုံကိုကျော်တချို့ထိန်းချုပ်မှုချင်တယ်။

အဆိုပါနေစဉ်စာမျက်နှာရဲ့ဘယ်ဘက်အခြမ်းမှ aligned ကြောင်းပုံရိပ်တစ်ခုရှိခြင်း ကြောင့်စာမကျြနှာကိုစာသားပတ်လည်စီးဆင်း ပုံနှိပ်ဒီဇိုင်းနှင့်လည်း web စာမျက်နှာများတွင်များအတွက်ဘုံဒီဇိုင်းကုသမှုဖြစ်ပါတယ်။ ဝဘ်အသုံးအနှုန်းများအတွက်, ဒီအကျိုးသက်ရောက်မှု image ကို floating အဖြစ်လူသိများသည် ။ ဒါကစတိုင်ပုနှင့်အတူအောင်မြင်နေသည် CSS ကိုပိုင်ဆိုင်မှု "float" ပါ။ ဤသည်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုစာသားသည်၎င်း၏ညာဘက်ခြမ်းမှလက်ဝဲ-aligned image ကိုလှည့်ပတ်စီးဆင်းခွင့်ပြုပါတယ်။ (ဒါမှမဟုတ်သူ့ရဲ့ဘယ်ဖက်ခြမ်းမှတစ်ဦးကို right-aligned image ကိုလှည့်ပတ်။ ) ဒီအမြင်အကျိုးသက်ရောက်မှုအောင်မြင်ရန်ဖို့ဘယ်လိုကြည့်ကြရအောင်။

HTML ကိုအတူ Start

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

tag ကို) ၏အစအဦးမှာပုံရိပ်တစ်ခုပေါင်းထည့်ပါ။ ဤတွင်ကြောင့် HTML ကို markup တူကားအဘယ်သို့:

အဆိုပါအပိုဒ်၏

စာသားကဒီမှာတတ်၏။ ဒီဥပမာထဲမှာ, ကျွန်တော်တစ်ဦး headshot ဓာတ်ပုံပုံရိပ်တစ်ခုရှိသည်, ဒါကြောင့်ဒီစာသားကိုဖွယ်ရှိ headshot အဘို့ဖြစ်၏တော်မူသောပုဂ္ဂိုလ်တစ်ဦးအကြောင်းကိုပါလိမ့်မယ်။

ပုံမှန်အားဖြင့်ကျွန်ုပ်တို့၏ဝက်ဘ်ဆိုဒ်စာမျက်နှာစာသားအပေါ်ကပုံရိပ်နှင့်အတူပြသမည်ဖြစ်သည်။ ပုံရိပ်တွေ HTML မှာပိတ်ပင်တားဆီးမှု-Level ဒြပ်စင်များမှာထားလို့ဖြစ်ပါတယ်။ ဤသည်ကို browser ကို default အားဖြင့် image ကိုဒြပ်စင်မီနှင့်အပြီးလိုင်းအားလပ်ချိန်ကိုဖော်ပြပေးဆိုလိုသည်။ ကျနော်တို့ CSS ကိုမှလှည့်အားဖြင့်ဒီ default အကြည့်ကိုပြောင်းလဲလိမ့်မယ်။ ပထမဦးစွာသို့သော်ကျွန်တော်တစ်ဦးကိုထည့်သွင်းပါလိမ့်မယ် ကျွန်တော်တို့ရဲ့ပုံရိပ်ကိုဒြပ်စင်မှအတန်းအစားတန်ဖိုးမြှင် ။ အဲဒီအတန်းအစားကျနော်တို့နောက်ပိုင်းမှာကျွန်တော်တို့ရဲ့ CSS ကိုသုံးပါလိမ့်မယ်တဲ့ "ချိတ်" အဖြစ်ပြုမူပါလိမ့်မယ်။

အဆိုပါအပိုဒ်၏

"left" ၏ဤအတန်းအစား၎င်း၏ကိုယ်ပိုင်အပေါ်မှာအားလုံးဘာမျှမသတိပြုပါ! ငါတို့အလိုရှိသောစတိုင်အောင်မြင်ရန်, ကြှနျုပျတို့အသုံးပွုရနျလိုအပျ CSS ကို လာမယ့်။

CSS ကို Styles

"left" ကြှနျုပျတို့လူတန်းစား attribute ကိုအပါအဝင်ရာအရပျ၌အကြှနျုပျတို့၏က HTML နှင့်အတူကျနော်တို့ယခု CSS ကိုမှဖွင့်နိုင်ပါတယ်။ ကျွန်တော်တို့ရဲ့ရန်စည်းမျဉ်းကိုထည့်သွင်းမယ်လို့ ကိုနှိပ်ပြီး ကြောင်း image ကို float နှင့်လည်းနောက်ဆုံးမှာ image ကိုလှည့်ပတ်ခြုံလိမ့်မည်ဟုစာသားလည်းနီးကပ်စွာကသည်စစ်ချီ Butt ပါဘူးဒါကြောင့်လာမယ့်အနည်းငယ် padding ကို add မယ်လို့။ ဒီနေရာတွင်ရေးရန်စေခြင်းငှါ၎င်း CSS ကိုဖြစ်ပါသည်:

.left {float: left; padding ကို: 0 20px 20px 0; }

ဒါကစတိုင်လက်ဝဲမှပုံရိပ်ရှိသတဲ့နှင့်အနည်းငယ်ဖြည့်စွက် padding ကို ပုံရဲ့ညာဘက်နဲ့အောက်ဆုံးမှ (အချို့ CSS ကိုအတိုကောက်သုံးပြီး) ။

သင်တစ်ဦးကို browser အတွက်ဒီက HTML ပါဝင်သောစာမျက်နှာပြန်လည်သုံးသပ်လျှင်, image ကိုယခုလက်ဝဲမှ aligned မည်ဖြစ်ကြောင်းနှင့်အပိုဒ်၏စာသားနှစ်ခုအကြားအကွာတစ်ဦးသင့်လျော်သောငွေပမာဏနှင့်အတူ၎င်း၏ညာဘက်ပေါ်လာလိမ့်မယ်။ ကျနော်တို့လိုမင်းထက်ဖြစ်ပါတယ်အသုံးပြုခဲ့တဲ့ "left" ၏အတန်းတန်ဖိုးကိုသတိပြုပါ။ "left" ဟူသောဝေါဟာရကို၎င်း၏ကိုယ်ပိုင်အပေါ်ဘာမျှမဘာဖြစ်လို့လဲဆိုတော့ကျနော်တို့ကဘာမှကိုခေါ်တော့နိုင်ဘူး။ ဤသည်မှာရှိသည်ဖို့လိုအပ်ပါတယ် ဟာ HTML မှာတစ်ဦးလူတန်းစား attribute ကို သင်လုပ်ရှာဖွေနေတဲ့အမြင်အာရုံအပြောင်းအလဲများကိုဆိုထားသည်တစ်ခုအမှန်တကယ် CSS ကိုစတိုင်နှင့်အတူအလုပ်လုပ်။

အဲဒီ Styles အောင်မြင်ရန်အခြားရွေးချယ်စရာနည်းလမ်းများ

image ကိုဒြပ်စင်တစ်ခုလူတန်းစား attribute ကိုပေးကမ်းခြင်းနှင့်ထို့နောက်ဒြပ်စင်သင်ဤ "လက်ဝဲ aligned ပုံရိပ်" ကြည့်ပြီးမြောက်နိုင်မှသာတလမ်းတည်းဖြင့်ဖြစ်ပါသည်ရှိသတဲ့တစ်ခုယေဘုယျ CSS ကိုစတိုင်သုံးပြီးဒီချဉ်းကပ်နည်း။ သင်တို့သည်လည်း image ကိုချွတ်ပယ်လူတန်းစားတန်ဖိုးကို ယူ. ပိုမိုတိကျတဲ့ selector ရေးသားခြင်းအားဖြင့် CSS ကိုအတူက style နိုင်ဘူး။ ဥပမာ, ရဲ့ကြောင်းပုံရိပ် "အဓိက-content ကို" ၏တစ်ဦးလူတန်းစားတန်ဖိုးကိုအတူကွဲပြားခြင်း၏အတွင်းပိုင်းသည်အဘယ်မှာရှိဥပမာတစ်ခုကိုကြည့်ကြကုန်အံ့။

အဆိုပါအပိုဒ်၏

ဤပုံဤ style လုပ်ဖို့, သင်သည်ဤ CSS ကိုရေးသားနိုငျခဲ့:

.main-content တွေကို img {float: left; padding ကို: 0 20px 20px 0; }

ဒီ sceario မှာတော့ကျွန်တော်တို့ရဲ့ပုံရိပ်ကိုစာသားမတိုင်မီတူသောပတ်လည်ရေပေါ်နှင့်တကွ, လက်ဝဲ aligned မည်ဖြစ်ကြောင်း, ဒါပေမယ့်ကျွန်တော်တို့ရဲ့ markup တစ်ခုအပိုလူတန်းစားတန်ဖိုးကိုထည့်သွင်းရန်မလိုအပ်ခဲ့ပါဘူး။ စကေးမှာဒီလုပ်နေတာစီမံခန့်ခွဲရန်ပိုမိုလွယ်ကူပါလိမ့်မည်လည်းစွမ်းဆောင်ရည်တိုးတက်ကောင်းမွန်အောင်ကူညီနိုင်သည့်, သေးငယ်တဲ့ HTML ဖိုင်ဖန်တီးကူညီပေးနိုင်ပါသည်။

နောက်ဆုံးအနေနဲ့သင်ပင်ဤကဲ့သို့သောတိုက်ရိုက်သင့်ရဲ့ HTML ကို markup သို့စတိုင်များကိုထည့်သွင်းနိုင်

အဆိုပါအပိုဒ်၏စာသားကဒီမှာတတ်၏။ ဒီဥပမာထဲမှာ, ကျွန်တော်တစ်ဦး headshot ဓာတ်ပုံပုံရိပ်တစ်ခုရှိသည်, ဒါကြောင့်ဒီစာသားကိုဖွယ်ရှိ headshot အဘို့ဖြစ်၏တော်မူသောပုဂ္ဂိုလ်တစ်ဦးအကြောင်းကိုပါလိမ့်မယ်။

ဤနည်းလမ်းကို "ဟုခေါ်ခြင်းဖြစ်သည် inline စတိုင်များ " ။ ကရှင်းရှင်းလင်းလင်းယင်း၏အခြေခံအဆောက်အဦး markup နှင့်အတူ Element တစ်ခုရဲ့စတိုင်ပေါင်းစပ်ဘာဖြစ်လို့လဲဆိုတော့ဒါဟာအကြံပြုလိုတယ်မဟုတ်ပါဘူး။ Web ကိုအကောင်းဆုံးအလေ့အကျင့်တစ်ခုစာမျက်နှာ၏စတိုင်လ်နဲ့ဖွဲ့စည်းပုံမှာသီးခြားဆက်လက်တည်ရှိသင့်ကြောင်း dictate ။ သင့်စာမျက်နှာရန်လိုအပ်ပါသည်တဲ့အခါဒီအထူးသဖြင့်အထောက်အကူဖြစ်ပါတယ် ယင်း၏ layout ကိုပြောင်းလဲစေနှင့်ကွဲပြားခြားနားသောမျက်နှာပြင်အရွယ်အစားနှင့်စက်ပစ္စည်းများအတွက်ကိုကြည့် တဲ့တုံ့ပြန်မှုက်ဘ်ဆိုက်နှင့်အတူ။ အဆိုပါ HTML မှာရောယှက်စာမျက်နှာ၏စတိုင်ရှိခြင်းကြောင့်ပိုပြီးခက်ခဲစေမည် မီဒီယာမေးမြန်းချက်စာရေးဆရာမ သူတို့အားကွဲပြားခြားနားသော screen များအတွက်လိုအပ်အဖြစ်သင့် site ရဲ့ကြည့်ထိန်းညှိကြလိမ့်မည်ဖြစ်သည်။

ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 4/3/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်။

HTML ကိုအတူ Start

CSS ကို Styles

အဲဒီ Styles အောင်မြင်ရန်အခြားရွေးချယ်စရာနည်းလမ်းများ

Alike posts

See Newest

Sapid posts