နှစ်ပေါင်းများစွာအဘို့, CSS ကို float က်ဘ်ဆိုက်အပြင်အဆင်ဖန်တီးခြင်းအတွက်တစ်ဦး finicky, သေးလိုအပ်သော, component တစ်ခုဖြစ်ခဲ့ပါပြီ။ သင့်ရဲ့ဒီဇိုင်းမျိုးစုံကော်လံကိုခေါ်လြှငျ, သငျသညျ float လှည့် ။ ဒီနည်းလမ်းကိုအတူပြဿနာကို web ဒီဇိုင်နာများ / developer များရှုပ်ထွေး site ကိုအပြင်အဆင်ဖန်တီးခြင်းအတွက်ပြသသောမယုံကြည်နိုင်လောက်အောင်လိမ္မာပါးနပ်ပေမယ့် CSS ကို float တကယ်ကဒီလမ်းအတွက်အသုံးပြုဖို့ရည်ရွယ်ဘယ်တော့မှခဲ့သောကွောငျ့ဖွစျသညျ။
float နဲ့ CSS positioning ကိုလာရန်နှစ်ပေါင်းများစွာ web design မှာနေရာတစ်နေရာရှိသည်ဖို့သေချာနေစဉ်, CSS ကို Grid နှင့် Flexbox အပါအဝင်အသစ်များ layout ကိုနည်းစနစ်ယခုရှိသော web designer သူတို့ရဲ့ site ကိုအပြင်အဆင်ကိုဖန်တီးရန်နည်းလမ်းအသစ်များကိုပေးခြင်းနေကြသည်။ အလားအလာအများကြီးပြနောက်ထပ်အသစ်က layout ကို technique ကို CSS ကိုအကွိမျမြားစှာကော်လံများဖြစ်ပါတယ်။
CSS ကို Columns ယခုနှစ်အနည်းငယ်အဘို့အလှည့်ပတ်ခဲ့ကြပါပြီ, ဒါပေမယ့်အဟောင်းတွေ browser များ (က Internet Explorer ၏အဓိကအားအဟောင်းတွေဗားရှင်း) တွင်ထောက်ခံမှုမရှိခြင်း၎င်းတို့၏ထုတ်လုပ်မှုအလုပ်တွင်ဤစတိုင်များကို အသုံးပြု. ထံမှအများအပြားက web ပညာရှင်များထားရှိမည်သိရသည်။
IE ကိုအဲဒီအဟောင်းတွေဗားရှင်းများအတွက်ထောက်ခံမှု၏အဆုံးနှင့်အတူအချို့သောက်ဘ်ဒီဇိုင်နာယခုအသစ်က CSS ကို layout ကိုရှေးခယျြစရာတွေနဲ့စမ်းသပ်နေကြတယ်, CSS ကိုကော်လံများပါဝင်သည်, သူတို့သည်သူတို့ float နှင့်အတူလုပ်ခဲ့တယ်ထက်သည်ဤသစ်ကိုချဉ်းကပ်မှုနှင့်အတူဤမျှလောက်ပိုပြီးထိန်းချုပ်မှုရှိသည်ဖြစ်လေသည်။
CSS ကိုကော်လံများ၏အခြေခံ
၎င်း၏အမည်ကိုအကြံပြုထားသကဲ့သို့, (လည်း CSS3 Multi-ကော်လံ layout ကိုအဖြစ်လူသိများ) CSS ကိုအကွိမျမြားစှာကော်လံများသင်ကော်လံအစုတခုအရေအတွက်ကိုသို့အကြောင်းအရာခွဲဖို့ခွင့်ပြုပါတယ်။ သင်အသုံးပြုမယ်လို့အခြေခံအကျဆုံး CSS ကိုဂုဏ်သတ္တိများရှိပါသည်:
- ကော်လံ-count က
- ကော်လံ-ကွာဟမှု
ကော်လံ-count ကအဘို့အသင်ချင်တယ်ကော်လံ၏နံပါတ်သတ်မှတ်။ ကော်လံကွာဟမှုသူတို့အားကော်လံအကြားရေကျင်းသို့မဟုတ်အကွာလိမ့်မည်။ အဆိုပါ browser ကိုဤအတန်ဖိုးများကို ယူ. အညီအမျှသင်သတ်မှတ်ကော်လံ၏နံပါတ်သို့အကြောင်းအရာခွဲပါလိမ့်မယ်။
အလေ့အကျင့်အတွက် CSS ကိုမျိုးစုံကော်လံတစ်ဘုံဥပမာသင်ကသတင်းစာဆောင်းပါး၌တွေ့ရမဲ့အရာနှင့်အလားတူမျိုးစုံကော်လံသို့စာသားကိုအကြောင်းအရာတစ်ခုပိတ်ပင်တားဆီးမှုခွဲထွက်ဖို့ဖြစ်လိမ့်မည်။ သငျသညျ (အလေ့အကျင့်အတွက်ဖွယ်ရှိဒီ markup အတွက်အကြောင်းအရာမျိုးစုံကိုအပိုဒ်ရှိပါလိမ့်မယ်နေချိန်မှာဥပမာရည်ရွယ်ချက်များအတွက်ငါသာ, တဦးတည်းအပိုဒ်ရဲ့ start ချပြီးသူဖြစ်ကြောင်းကိုသတိပြုပါ) အောက်ပါ HTML ကို markup ရှိတယ်ပြောပါ:
ကသင့်ရဲ့ဆောင်းပါး၏ခေါင်းစဉ်
ဒီနေရာမှာစာသားအပိုဒ်အများကြီးမြင်ယောင်ကြည့်ပါ ...
သငျသညျထို CSS ကိုစတိုင်များရေးသားခဲ့သည်လျှင်:
.content {-moz-ကော်လံ-count: 3; -webkit-ကော်လံ-count: 3; ကော်လံ-ရေတွက်: 3; -moz-ကော်လံ-ကွာဟမှု: 30px; -webkit-ကော်လံ-ကွာဟမှု: 30px; ကော်လံ-ကွာဟမှု: 30px; }ဤသည် CSS ကိုအုပ်ချုပ်မှုကိုသူတို့ကိုအကြား 30 ရက် pixels ကိုတစ်ကွာဟမှုနှင့်အတူ 3 တန်းတူကော်လံသို့ "အကြောင်းအရာ" ဌာနခွဲခွဲလိမ့်မယ်။ သငျသညျနှစျခုကော်လံအစား 3 လိုချင်လျှင်, သင်ရိုးရှင်းစွာပြုလုပ်တန်ဖိုးနှင့် browser ကိုအညီအမျှအကြောင်းအရာခွဲရန်သူတို့အားစစ်ကြောင်း၏သစ်ကို width တွက်ချက်မယ်ဆိုတာကိုပြောင်းလဲလိမ့်မယ်။ non-prefixed ကြေညာချက်များနောက်တွင်ကျနော်တို့ပထမဦးဆုံးရောင်းချသူ-prefixed ဂုဏ်သတ္တိများကိုအသုံးမသတိပြုပါ။
ဤကဲ့သို့လွယ်ကူသော, ဒီလမ်းအတွက်ယင်း၏အသုံးပြုမှုက်ဘ်ဆိုက်အသုံးပြုရန်မေးခွန်းထုတ်စရာဖြစ်ပါတယ်။ အကယ်စင်စစ်သင်သည်မျိုးစုံကော်လံသို့အကြောင်းအရာကိုတစည်းကွဲနိုင်ပါတယ်, ဒါပေမယ့်ဤကော်လံ၏အမြင့်မျက်နှာပြင်၏ "ခြံ" အောက်တွင်ဖော်ပြထားသောကျရောက်အထူးသဖြင့်လျှင်, Web ကိုများအတွက်အကောင်းဆုံးစာဖတ်ခြင်းအတွေ့အကြုံကိုမည်မဟုတ်ပါ။
စာရှုသူများအထို့နောက်တက် scroll ဆင်းအပြည့်အဝအကြောင်းအရာဖတ်ရှုဖို့အလို့ငှာရန်ရှိသည်လိမ့်မယ်။ သို့တိုင်, CSS ကိုကော်လံကျောင်းအုပ်ကြီးသင်ဒီမှာကြည့်ရှုသကဲ့သို့လွယ်ကူသည်, ထိုသို့ဒါရုံအချို့အပိုဒ်များ၏ content ခွဲထက်အများကြီးပိုလုပ်ဖို့သုံးနိုငျ - ကအမှန်ပင်, layout ကိုအတွက်အသုံးပြုနိုင်ပါတယ်။
CSS ကိုကော်လံများနှင့်အတူ layout
သငျသညျအကြောင်းအရာ 3 ကော်လံရှိပါတယ်တဲ့အကြောင်းအရာဧရိယာနှင့်အတူတစ်ဦးဝက်ဘ်စာမျက်နှာရှိသည်ဟုဆိုသည်။ ဤအရာသည်အလွန်ပုံမှန်က်ဘ်ဆိုက်အပြင်အဆင်ဖြစ်ပါသည်, အဲဒီ 3 ကော်လံအောင်မြင်ရန်, သင်ပုံမှန်၌နေသောသင်းဖွဲ့ float လိမ့်မယ်။ CSS ကိုမျိုးစုံ-ကော်လံနှင့်အတူကြောင့်ဤမျှလောက်လွယ်ကူစေရန်ဖြစ်ပါတယ်။
ဤတွင်အချို့သောနမူနာ HTML ကိုဖြစ်ပါသည်:
နောက်ဆုံးရသတင်းများ
အကြောင်းအရာကဒီမှာသွားပါလိမ့်မယ် ...
ကျွန်ုပ်တို့၏ဘလော့
အကြောင်းအရာကဒီမှာသွားပါလိမ့်မယ် မှစ. ...
လာမည့်အစီအစဉ်များ
အကြောင်းအရာကဒီမှာသွားပါလိမ့်မယ် ...
ဤအမျိုးစုံကော်လံစေရန်အဆိုပါ CSS ကိုသင်ယခင်ကသိမြင်လျှင်အဘယ်အရာနှင့်အတူစတင်သည်:
.content {-moz-ကော်လံ-count: 3; -webkit-ကော်လံ-count: 3; ကော်လံ-ရေတွက်: 3; -moz-ကော်လံ-ကွာဟမှု: 30px; -webkit-ကော်လံ-ကွာဟမှု: 30px; ကော်လံ-ကွာဟမှု: 30px; }အခုတော့ဒီမှာစိန်ခေါ်မှု browser ကိုအညီအမျှဒီအကြောင်းအရာခွဲဖို့လိုလားကတည်းကဖြစ်ပါတယ်, ဒါကြောင့်, ဤကွဲပြားမှုများ၏ content အရှည်ကွဲပြားခြားနားသည်ဆိုပါက, ထို browser ကိုအမှန်တကယ်တစ်ဦးချင်းဌာနခွဲများ၏ content ခွဲမည်, တဦးတည်းကော်လံကရဲ့ start ထည့်သွင်းခြင်းနှင့် ထို့နောက် (သင်စမ်းသပ်မှုတစ်ခု run နှင့်တစ်ဦးချင်းစီခွဲခြားအတွင်း၌အကြောင်းအရာအမျိုးမျိုးအရှည်ကိုထည့်သွင်းရန်ဤကုဒ်ကိုသုံးခြင်းဖြင့်ဒီကိုတွေ့မြင်နိုင်သည်) အခြားသို့ဆက်လက်!
ဆိုလိုသည်မှာသင်သည်လိုချင်တာတွေမဟုတ်ပါဘူး။ သင်တို့သည်နောက်ကိစ္စတစ်ဦးချင်းဌာနခွဲရဲ့ content တွေကိုဖြစ်နိုင်သည်ကိုမည်သို့ကြီးတွေသို့မဟုတ်သေးငယ်တဲ့, သင်ကခွဲထွက်ချင်ဘယ်တော့မှဤသင်းဖွဲ့တစ်ခုချင်းစီဟာကွဲပြားကော်လံဖန်တီးချင်ပါ။ သငျသညျ CSS ကို၏ဤတစျဦးအပိုဆောင်းလိုင်းပေါင်းထည့်ခြင်းဖြင့်ဒီအောင်မြင်ရန်နိုင်သည်
.content div {display: inline-ပိတ်ပင်တားဆီးမှု; }ဤသည်ကို browser မျိုးစုံကော်လံသို့ဤကိုစူးသကဲ့သို့နဂိုအတိုင်းဆက်ရှိနေရန် "အကြောင်းအရာ" ၏အတွင်းပိုင်းဖြစ်ကြောင်းသူတို့အားကွဲပြားခြင်းအတင်းပါလိမ့်မယ်။ ကျနော်တို့ကဒီမှာဘာမှသတ်မှတ်ထားတဲ့ width ကိုမပေးခဲ့ပါဘူးကတည်းက browser ကို resizes အဖြစ်တောင်မှပိုကောင်း, ဤကော်လံလိုအလြောကျထိုသူတို့အဘို့တစ်ခုစံပြ application ကိုအောင်ဆိုဒ်ပြောင်းရန်လိမ့်မယ် တုံ့ပြန်မှုဝက်ဘ်ဆိုက်များ ။ အရပျ၌က "inline-ပိတ်ပင်တားဆီးမှု" စတိုင်နှင့်အတူ, သင့် 3 သင်းဖွဲ့တစ်ခုချင်းစီအကြောင်းအရာတစ်ခုကွဲပြားကော်လံဖြစ်လိမ့်မည်။
ကော်လံ-အကျယ်အသုံးပြုခြင်း
အဲဒီမှာသင်အသုံးပြုနိုင်သော "ကော်လံ-count က" မှတပါးအခြားပိုင်ဆိုင်မှုပစ္စည်းဖြစ်တယ်, သင့်ရဲ့ layout ကိုလိုအပ်ချက်အပေါ်မူတည်ပြီးကြောင့်အမှန်တကယ်သင့် site များအတွက်ပိုကောင်းတဲ့ရွေးချယ်မှုဖြစ်နိုင်ပါသည်။ ဤ "ကော်လံ-width ကို" ဖြစ်ပါတယ်။ ယခင်ကပြထားတဲ့အတိုင်းတူက HTML markup အသုံးပြုခြင်း, ငါတို့အစားကျွန်တော်တို့ရဲ့ CSS ကိုနှင့်အတူဤလုပ်နိုင်:
.content {-moz-ကော်လံ-width: 500px; -webkit-ကော်လံ-width: 500px; ကော်လံ-width: 500px; -moz-ကော်လံ-ကွာဟမှု: 30px; -webkit-ကော်လံ-ကွာဟမှု: 30px; ကော်လံ-ကွာဟမှု: 30px; } .content div {display: inline-ပိတ်ပင်တားဆီးမှု; }ဒီအလုပ်လုပ်တယ်သောလမ်းကို browser တစ်ခုကိုကော်လံအများဆုံးတန်ဖိုးကိုအဖြစ်ဒီ "ကော်လံ-width ကို" ကိုအသုံးပြုသည်။ browser ကိုပြတင်းပေါက်ထက်နည်း 500 pixels ကိုကျယ်ပြန့်ပါလျှင်ဒီတော့အဲဒီ 3 သင်းဖွဲ့တစ်ခုတည်းကော်လံနောက်ထပ်၏ထိပ်တဦးပေါ်လာလိမ့်မယ်။ ဤသည်မိုဘိုင်း / အသေးမျက်နှာပြင်အပြင်အဆင်အတွက်အသုံးပြုပုံမှန်အပြင်အဆင်ဖြစ်ပါတယ်။
browser ကို width ကိုတိုးသတ်မှတ်ထားသောကော်လံကွာဟချက်တွေနဲ့အတူ 2 ကော်လံ fit ဖို့လုံလောက်တဲ့ကြီးမားတဲ့ဖြစ်သကဲ့သို့, ဘရောက်ဇာကိုအလိုအလျှောက်နှစ်ခုကော်လံဖို့တစ်ခုတည်းကော်လံ layout ကိုကနေသွားပါလိမ့်မယ်။ မျက်နှာပြင်အကျယ်တိုးပွားလာအောင်ထားပါနဲ့နောက်ဆုံးမှာ, သငျသညျမိမိတို့ကိုယ်ပိုင်ကော်လံထဲမှာဖော်ပြပါတယ်ကျွန်တော်တို့ရဲ့ 3 သင်းဖွဲ့တစ်ခုချင်းစီနှင့်အတူ 3 ကော်လံဒီဇိုင်းကိုရလိမ့်မယ်။ နောက်တဖန်, ဒီအခြို့သောတုံ့ပြန်မှု, ရရှိရန်အကောင်းဆုံးနည်းလမ်းဖြစ်ပါတယ် Multi-device ကိုဖော်ရွေ အပြင်အဆင်, နှင့်သင်ပင်သုံးစွဲဖို့မလိုအပ်ပါဘူး မီဒီယာမေးမြန်းချက် ယင်း layout ကိုစတိုင်များကိုပြောင်းလဲ!
အခြားအကော်လံ Properties ကို
ဤနေရာတွင်ဖုံးလွှမ်းဂုဏ်သတ္တိများအပြင်, အရောင်, စတိုင်နှင့်သင်သည်သင်၏ကော်လံအကြားစည်းမျဉ်းစည်းကမ်းတွေကိုဖန်တီးရန်ခွင့်ပြုကြောင်းအကျယ်တန်ဖိုးများအပါအဝငျ "ကော်လံ-စိုးမိုးရေး" အတွက်ဂုဏ်သတ္တိများသည်လည်းရှိပါသည်။ သင်သည်သင်၏ကော်လံခွဲထုတ်အချို့လိုင်းများရှိသည်ဖို့လိုလျှင်ဤရွေ့ကားအစားနယ်နိမိတ်၏အသုံးပြုသောမည်ဖြစ်သည်။
စမ်းသပ်ဖို့အချိန်
လောလောဆယ် CSS ကိုအကွိမျမြားစှာကော်လံ Layout ကောင်းကောင်းထောက်ပံ့ထားခြင်းဖြစ်သည်။ ရှေ့ဆက်နှင့်အတူ, ဝဘ်အသုံးပြုသူများ 94% ကျော်ကဤစတိုင်များကိုတွေ့မြင်နိုင်ပါလိမ့်မယ်, ထိုကလက်ခံအုပ်စုတစ်စုကယ့်ကိုကိုယ့်ကိုသင်ဘာပဲဖြစ်ဖြစ်တော့ဘူးထောက်ပံ့မည်မဟုတ်ပါထားတဲ့ Internet Explorer ကိုတာအဟောင်းတွေဗားရှင်းပါလိမ့်မယ်။
ထောက်ခံမှု၏ဤအဆငျ့နှင့်အတူယခုအရပ်ဌာန၌, CSS ကိုကော်လံများနှင့်အတူစမ်းသပ်နှင့်ထုတ်လုပ်မှုအဆင်သင့်ဝက်ဘ်ဆိုက်များတွင်ဤစတိုင်များစေလွှတ်စတင်ဖို့ဖို့မမလိုပါဖြစ်ပါတယ်။ သင်ဤဆောင်းပါးအတွက်တင်ပြ HTML နဲ့ CSS ကိုသုံးပြီးသင့်ရဲ့စမ်းသပ်ချက်စတင်သင့် site ရဲ့ layout လိုအပ်ချက်များအတွက်အကောင်းဆုံးအလုပ်လုပ်မယ်လို့အဘယ်အရာကိုမြင်မှကွဲပြားခြားနားသောတန်ဖိုးများနှင့်အတူလှည့်ပတ်ကစားနိုင်ပါတယ်။