ဗဟိုပြု: CSS ကို-layout ကို

ဘယ်အချိန်မှာစာမျက်နှာ၏အဆင်အပြင်ကိုမကြာခဏတစ်ဦးဗဟိုပြု CSS ကို-လမ်းစေရန်လိုအပ်သောဖြစ်ပါသည်: ဥပမာ, အဓိကယူနစ်ဗဟိုမှ။ ရှိရာသို့အလျင်အမြန်သို့မဟုတ်နောက်ပိုင်းမည်သည့်ဝိဉာဉ်သုံးစွဲဖို့ရှိသည်လိမ့်မယ်တစ်ဦးချင်းစီ၏ဤပြဿနာကိုအကြိမ်ကြိမ်ဖြေရှင်းချက်ရှိပါတယ်။

စင်တာမှစာသားကို align

မကြာခဏသငျသညျစည်းကြပ်၏အချိန်ကိုလျှော့ချရန်, ဤကိစ္စတွင်အတွက်စာသားဗဟိုပြု, CSS ကိုမသတ်မှတ်ချင်အလှဆင်ရည်ရွယ်ချက်။ ယခင်ကဒီက HTML-attribute တွေသုံးပြီးပြုလေ၏, ဒါပေမယ့်အခုစံစတိုင်စာရွက်နှင့်အတူစာသား align ရန်လိုအပ်သည်။ သင်အလယ်စာသား CSS ကို alignment ကိုအတွက်ပြင်ပ padding ကိုပြောင်းလဲပစ်ရန်လိုသည့်အဘို့ပိတ်ပင်တားဆီးမှုမှမတူဘဲတစ်ခုတည်းလိုင်းနှင့်အတူဖန်ဆင်းထားသည်:

• text-align: စင်တာ;

ဤသည်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုမိဘများထံမှကလေးများအားလုံးမှအမွေဆက်ခံခြင်းနှင့်အောင်မြင်ပြီးဖြစ်ပါတယ်။ ဒါဟာစာသားဒါပေမယ့်လည်းအခြားဒြပ်စင်ဖို့မသာသက်ရောက်သည်။ ဤရည်ရွယ်ချက်အဘို့, သူတို့က (ဥပမာ span) သို့မဟုတ်အတန်း-ပိတ်ပင်တားဆီးမှု (ပိတ်ပင်တားဆီးမှု display ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုသတ်မှတ်မဆိုလုပ်ကွက်) စာလုံးအသေးဖြစ်သင့်သည်။ အဆုံးစွန်သော option ကိုလည်းသင်ထစ်၏ဒြပ်စင်ပိုမိုပြောင်းလွယ်ပြင်လွယ် configuration များရဲ့ width နဲ့ height ကိုပြောင်းလဲခွင့်ပြုပါတယ်။

စာမကျြနှာကိုမကြာခဏကိုယ်တော်တိုင်ဖို့ tag ကို attribute ကို align ။ W3C align attribute ကိုပေါရာဏအသိအမှတ်ပြုကတည်းကဒီအခကျြခငျြး, code ကိုမမှန်ကန်တဲ့စေသည်။ စာမျက်နှာတစ်ခုပေါ်မှာအသုံးပြုခြင်းအကြံပြုသည်မဟုတ်။

ဗဟိုပြုပိတ်ပင်တားဆီးမှု

ပြင်ပ padding ကိုအနားသတ်များအသုံးပြုခြင်း: သင်အလယ်ရှိ div ၏ alignment ကိုတင်ထားရန်လိုလျှင်, CSS ကိုအတော်လေးအဆင်ပြေလမ်းပူဇော်နိုင်ပါတယ်။ padding ပိတ်ပင်တားဆီးမှုဒြပ်စင်အဖြစ်သတ်မှတ်ထားသောနှင့်လိုင်း-ပိတ်ပင်တားဆီးမှုနိုင်ပါသည်။ Svoysva တန်ဖိုးကို 0 (ဒေါင်လိုက် padding ကို), နှင့်အော်တို (အလျားလိုက်အလိုအလျှောက်ထစ်) ဖြစ်သင့်ပါတယ်:

• margin: 0 အော်တို;

ယခုဤ option ကိုလုံးဝတရားဝင်အဖြစ်အသိအမှတ်ပြုသည်။ ပြင်ပ padding ကိုအသုံးပြုခြင်းသည်လည်းသင်တို့အလယ်ဗဟို၏ alignment ကိုတင်ထားရန်ခွင့်ပြု: CSS ကို-margin property ကိုစာမကျြနှာပျေါတှငျ positioning ကိုဒြပ်စင်များနှင့်ဆက်စပ်ပွဿနာမြားစှာကိုဖြေရှင်းဖို့ကျွန်တော်တို့ကိုခွင့်ပြုပါတယ်။

အဆိုပါလုပ်ကွက်၏လက်ဝဲသို့မဟုတ်လက်ယာအစွန်၏ alignment

တခါတရံမှာ CSS ကို-လမ်းအလယ်ဗဟို၏ alignment ကိုမလိုအပ်ပါဘူး, ဒါပေမယ့်လာမယ့်နှစ်ဦးကိုလုပ်ကွက်များ, လက်ဝဲဘက်ခြမ်းကနေတစျခုနှငျ့အခွားထားရန်လိုအပ်ပါက - ညာဘက်အနေဖြင့်။ ကျန်ကြွင်းညာဘက်သို့မဟုတ်အဘယ်သူအားမျှ: ဤသုံးခုတန်ဖိုးများများထဲမှယူနိုငျသောကတော့ float property ရှိ၏။ သင်ဟာနားမှာခြမ်းထားရှိသင့်ကြောင်းနှစ်ခုကိုလုပ်ကွက်များဆိုပါစို့။ အောက်မှာဖေါ်ပြတဲ့အတိုင်းထိုအခါကုဒ်ဖြစ်ပါသည်:

• .left {float: left;}
• .right {float: ညာဘက်}

ပထမဦးဆုံးနှစ်ဦးကိုလုပ်ကွက်များ (ဥပမာ, footer) အရတည်ရှိရပါမည်သည့်တတိယပိတ်ပင်တားဆီးမှုရှိ၏လျှင်, သူကရှင်းရှင်းလင်းလင်းအင်္ဂါရပ်မှတ်ပုံတင်ရန်လိုအပ်သောသည်:

• .left {float: left;}
• .right {float: ညာဘက်}
• အောက်ခြေ {ရှင်းရှင်းလင်းလင်း: နှစ်ဦးစလုံး}

စုစုပေါင်းစီးဆင်းမှုထဲကလက်ဝဲနှင့်လက်ယာပြိုလဲအတန်းနှင့်အတူလုပ်ကွက်သော aligned ဒြပ်စင်များ၏အလွန်ဖြစ်တည်မှုလျစ်လျူရှုရှိသမျှသည်အခြားသောဒြပ်စင်တစ်ခုဖြစ်သည်ဆိုတဲ့အချက်ကို။ အိမ်ခြံမြေရှင်းရှင်းလင်းလင်း: ထဲက footer ပိတ်ပင်တားဆီးမှုခွင့်ပြုသို့မဟုတ်အခြားမြင်နိုင်သောနှစ်ဦးစလုံးစီးဆင်းမှုဆဲလ်ကနေ precipitated နှင့်လက်ဝဲနှင့်လက်ယာနှစ်ဦးစလုံးအပေါ် (float) ခြုံတားမြစ်ထား။ ထို့ကြောင့်, ကျွန်တော်တို့ရဲ့ဥပမာထဲမှာ, footer အောက်ဖက်အိုးအိမ်မဲ့ဖြစ်ပါတယ်။

ဒေါင်လိုက် alignment ကို

အဆိုပါ CSS ကို-နည်းလမ်းတွေ၏ဗဟို၏ alignment ကိုတင်ထားရန်မလုံလောက်ဘူး, သင်သည်လည်းထိုသူငယ်ပိတ်ပင်တားဆီးမှု၏ဒေါင်လိုက်အနေအထားပြောင်းလဲပစ်ရမယ်ဘယ်မှာအမှုပေါင်းရှိပါတယ်။ မဆို line သို့မဟုတ်အတန်း-ပိတ်ပင်တားဆီးမှုဒြပ်စင်, အထက်သို့မဟုတ်အောက်ပိုင်းအစွန်းဆန့်ကျင်ဖိမိဘဒြပ်စင်၏အလယ်တွင်တည်ရှိသောသို့မဟုတ်တစ်ဦးမတရားတည်နေရာအတွက်ဖြစ်နိုင်ပါတယ်။ အများစုကတော့ကဒေါင်လိုက်-align attribute ကိုအသုံးပြုယင်းလုပ်ကွက်၏ဗဟို၏ alignment ကိုလိုအပ်သည်။ နှစ်ခုလုပ်ကွက်, အခြားအတွင်းအသိုက်တဦးတည်းရှိတယ်ဆိုပါစို့။ အတန်း-ပိတ်ပင်တားဆီးမှုဒြပ်စင် (: inline-ပိတ်ပင်တားဆီးမှု display ကို) - ဒီမိုးလုံလေလုံယူနစ်အတွက်။ ဒါဟာဒေါင်လိုက်ပိတ်ပင်တားဆီးမှုကလေးသည် align လုပ်ဖို့လိုအပ်သောဖြစ်ပါသည်:

• အထက်နယ်နိမိတ်၏ alignment ကို - .child {ဒေါင်လိုက်-align: ထိပ်တန်း};
• ဗဟိုပြု - .child {ဒေါင်လိုက်-align: အလယ်တန်း};
• အောက်ခြေအစွန်း၏ alignment ကို - .child {ဒေါင်လိုက်-align: အောက်ဆုံး};

text-align အသံ, ဒါမှမဟုတ်ဒေါင်လိုက်-align လျှောက်ထားပါဘူးပိတ်ပင်တားဆီးမှုဒြပ်စင်မှာ။

ဘက်မလိုက်ယူနစ်နှင့်အတူဖြစ်နိုင်ပါ့မလားပြဿနာများ

တစ်ခါတစ်ရံ CSS ကို-လမ်း၏ဗဟိုအနည်းငယ်ဒုက္ခဖြစ်စေနိုင်ပါသည် align ပြီးရင်တော့အရင်ကအတိုင်းပါပဲ။ ဥပမာအားဖြင့်, အခါ, တစ်ဦးကတော့ float ကိုသုံးပြီး: ပထမ, .second နှင့် .third: ဥပမာလုပ်ကွက်သုံးခုရှိပါတယ်။ ဒုတိယနှင့်တတိယလုပ်ကွက်ကိုပထမဦးဆုံး၌အိပ်။ တစ်ဦးလူတန်းစားဒုတိယလက်ဝဲ-aligned နှင့်ပြီးခဲ့သည့်ပိတ်ပင်တားဆီးမှုနှင့်အတူ Element တစ်ခုရဲ့ - ညာဘက်အပေါ်။ align လုပ်ဖို့ပြီးနောက်နှစ်ခုစီးကနေကျဆင်းသွားသည်။ မိဘဒြပ်စင်အမြင့် (ဥပမာ 30em) သတ်မှတ်မထားဘူးဆိုရင်အဲဒါကိုလက်အောက်ခံယူနစ်များ၏အမြင့်ဆန့်ရန်ငြိမ်းလိမ့်မည်။ .second နှင့် .third ကိုမြင်တော်မူသောအထူးယူနစ်, - ဤအမှားမှရှောင်ရှားရန်, "နဂိုအတိုင်းဖြစ်အောင်" ကိုအသုံးပြုပါ။ CSS ကို-ကုဒ်:

• .second {float: လက်ဝဲ}
• .third {float: ညာဘက်}
• .clearfix {အမြင့်: 0; ရှင်းရှင်းလင်းလင်း: နှစ်ဦးစလုံး;}

မကြာခဏအသုံးပြုကြသည်ကြားဖြတ်: ပြီးနောက်လည်း psevdorasporki ဖန်တီးခြင်းအားဖြင့်ရာအရပျသို့လုပ်ကွက်ပြန်လာခွင့်ပြုထားတဲ့ (အတန်းအစားနှင့်အတူ div အတွက်ဥပမာထဲမှာကွန်တိန်နာအတွင်းမှတည်ရှိသည်နှင့်တစ်ဦးပထမ .left နှင့် .right ပါဝင်သည်):

• .left {float: လက်ဝဲ}
• .right {float: ညာဘက်}
• .container: {အကြောင်းအရာပြီးနောက်: ''; display: စားပွဲပေါ်မှာ; ရှင်းရှင်းလင်းလင်း: နှစ်ဦးစလုံး;}

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

မကြာခဏ layout ကိုကြုံတွေ့နောက်ထပ်ပြဿနာ - လိုင်း-ပိတ်ပင်တားဆီးမှုဒြပ်စင် alignment ကို။ သူတို့တစ်ဦးစီပြီးနောက်အာကာသကိုအလိုအလျောက်ထည့်သွင်းထားသည်။ ကအနုတ်လက္ခဏာထစ်အားဖြင့်သတ်မှတ်ပါတယ်သောအနားသတ်အိမ်ခြံမြေ, ကူညီပေးသည်ကိုကိုင်တွယ်။ ဥပမာအားဖြင့်, reset လျော့နည်းမကြာခဏအသုံးပြုကြသည်သောအခြားနည်းလမ်းတွေ, ရှိပါတယ် သည့်စာလုံးအရွယ်အစား။ ဤကိစ္စတွင်ခုနှစ်, မိဘဒြပ်စင်များ၏ဂုဏ်သတ္တိများ font-size ကိုက register လုပ်သွား: 0 ။ စာသားလုပ်ကွက်အတွင်းတည်ရှိပြီး အကယ်. လိုင်း-block element တွေကိုများ၏ဂုဏ်သတ္တိများလိုချင်သောစာလုံးအရွယ်အစားမှပြန်သွားကြပြီ။ ဥပမာအားဖြင့်, font-size: 1em ။ အဆိုပါနည်းလမ်းကိုအမြဲအဆင်ပြေမဟုတျပါဘူး, ဒါကြောင့်ပိုပြီးလေ့ပြင်ပမာဂျင်နှင့်အတူဗားရှင်းကိုအသုံးပြုသည်။

အထွေထွေ layout ကိုများနှင့်အဆင်အပြင်, ထိုဆိုင်များတွင်ကုန်စည်၏တည်နေရာနှင့်သေးငယ်တဲ့များ၏ site ပေါ်တွင်ဓာတ်ပုံများကို: Align လုပ်ခြင်းလုပ်ကွက်သင်သည်လှသောအဆင်းနှင့်အလုပ်လုပ်တဲ့စာမကျြနှာကိုဖနျတီးဖို့ခွင့်ပြုပါတယ်။