Олон жилийн турш CSS-ийн х ° в ° гч нь вэб сайтуудын іісгэлийг бий болгоход зайлшг¿й шаардлагатай боловч зайлшгій шаардлагатай хэсэг юм. Хэрэв таны загвар олон баганыг дуудсан бол, та хөвөх төхөөрөмж рүү эргэв . Энэ аргын асуудал нь вэб дизайнерууд / хөгжүүлэгчид сайтуудын цогцолборууд үүсгэхэд харуулсан гайхалтай функцийг үл харгалзан CSS-ийн хөвүүд ийм аргаар ашиглагдахгүй байсан юм.
Хайлт ба CSS байршил нь олон жилийн турш вэб дизайн хийхэд тохиромжтой гэдэгт итгэлтэй байхын зэрэгцээ CSS Grid болон Flexbox зэрэг шинэ layout техникүүд нь вэбсайтуудын дизайнерууд өөрсдийн вэбсайтуудын байршлыг бий болгох шинэ аргуудыг олгож байна. Олон янзын боломжит боломжуудыг харуулсан өөр нэг шинэ арга нь CSS олон багана юм.
CSS Columns нь хэдхэн жилийн дараа ойртсоор ирсэн боловч хуучин хөтөчүүдэд (ихэнхдээ Internet Explorer-ийн хуучин хувилбарууд) дэмжигдээгүй байгаа нь олон төрлийн вэбсайтуудыг эдгээр загваруудыг өөрсдийн үйлдвэрлэлийн ажилд ашиглахаас сэргийлдэг.
IE-ийн хуучин хувилбаруудад дэмжлэг үзүүлсэн төгсгөлд зарим вэб дизайнерууд CSS-ийн шинэ байршлын тохируулгууд, CSS Columns-т ордог бөгөөд тэдгээр нь хөвөхтэй харьцуулахад эдгээр шинэ хандлагуудтай харьцуулахад илүү их хяналт тавьдаг болохыг олж мэдэж байна.
CSS баганын үндэс
Түүний нэрийг дурдахад, CSS Олон Баганууд (CSS3 олон багана) нь агуулгыг олон тооны багананд хуваахыг зөвшөөрдөг. Таны ашиглах хамгийн үндсэн CSS шинж чанарууд нь:
- багана-тоолох
- багана-ялгаа
Колл-баганын хувьд та хүссэн баганыхаа тоог зааж өгнө. Баганын ялгаа нь эдгээр баганы хоорондох суваг буюу зай болно. Хөтөч эдгээр утгыг аваад агуулгыг нь зааж өгсөн багануудын тоогоор жигд хуваадаг.
Практикт CSS олон баганын нийтлэг жишээ бол текстийн агуулгын блокыг олон тооны багананд хуваах явдал юм. Дараах HTML тэмдэглэгээг танд тэмдэглээрэй (жишээ нь, зорилгодоо зөвхөн нэг догол мөрийн эхлэлийг тавьдаг бол практик дээр энэ тэмдэглэгээн дэх агуулгын олон догол мөр байх болно гэдгийг анхаарна уу):
h1>Текстийн догол мөрүүдийн олонхийг төсөөлье ... p> div>
Хэрэв та эдгээр CSS загварыг бичсэн бол:
.content {-moz-column-count: 3; -webkit-column-count: 3; багана-тоо: 3; -moz-багана-ялгаа: 30px; -webkit-column-gap: 30px; багана-ялгаа: 30px; }Энэ CSS дүрэм нь "агуулгын" хуваагдлыг хооронд нь 3 тэгш өнцөгт баганаар хуваадаг. Хэрэв та 3-н оронд 2 баганыг хүсвэл энэ утгыг өөрчлөх бөгөөд хөтөч нь тэдгээр багануудын шинэ өргөнийг агуулгыг хувааж тэгш хувиарлах болно. Эхлээд борлуулагч-угтвартай өмчийг урьдчилан ашигладаг тул урьдчилан баталгаагүй мэдэгдлийн дараа хэрэглэдэг.
Үүнтэй хялбар байх нь вэбсайт ашиглахад иймэрхүү байдлаар ашиглах нь эргэлзээтэй байна. Тийм ээ, та хэд хэдэн баганыг хэд хэдэн баганад хувааж болно, гэхдээ эдгээр баганын өндөр нь дэлгэцийн "fold" -ээс доош унадаг бол энэ нь Вэбийн хамгийн сайн унших туршлага биш байж магадгүй юм.
Уншигчид бүрэн агуулга уншиж үзэхийн тулд дээш доош гүйлгэх хэрэгтэй болно. CSS Columns-ийн удирдагч нь энд байгаа шиг хялбархан бөгөөд зарим нэг зүйлийн агуулгуудыг хуваахаас илүү ихийг хийхэд ашиглаж болох юм. Энэ нь яг үнэндээ байршилд ашиглагдах боломжтой.
CSS багануудтай
Контентын 3 баганатай агуулгын талбар бүхий вэб хуудастай гэдгээ хэлнэ үү. Энэ бол маш энгийн вэбсайт байрлалтай бөгөөд тэдгээр 3 багананд хүрэхийн тулд та ерөнхийдөө доторхи хэлбэлзэлтэй байх болно. CSS олон баганатай бол энэ нь маш хялбар байдаг.
Жишээ нь HTML:
Хамгийн сүүлийн мэдээ h2>
Агуулга энд очих болно ... p>
Болж буй үйл явдлууд h2>
Агуулга энд очих болно ... h2> p>
div> Эдгээр олон багана үүсгэх CSS нь өмнө нь харсан зүйлүүдээс эхэлдэг:
.content {-moz-column-count: 3; -webkit-column-count: 3; багана-тоо: 3; -moz-багана-ялгаа: 30px; -webkit-column-gap: 30px; багана-ялгаа: 30px; } Одоо энэ асуудал нь хөтөч энэ агуулгыг хуваахыг хүсдэг учраас эдгээр хувиудын агуулгын үргэлж өөр өөр байх тохиолдолд хөтөч нь тусдаа хуваагдлын агуулгыг хувааж, эхлэлийг нэг багананд нэмж өгнө. дараа нь өөр нэг хэсэг рүү үргэлжлүүлэн явуул (туршилтыг ажиллуулахын тулд энэ кодыг ашиглан үүнийг харж болно.
Энэ бол таны хүссэн зүйл биш юм. Та эдгээр хувиудыг тус тусад нь баганаар үүсгэхийг хүсч байгаа бөгөөд хуваах хичнээн том, жижиг байхаас үл хамааран үүнийг салгахыг хэзээ ч хүсэхгүй. Та энэ нэг нэмэлт CSS мөрийг нэмж үүнийг хийж чадна:
.dividing div {display: inline-block; } Энэ нь "контент" доторх эдгээр хэсгүүдийг үүнийг олон багананд хуваасантай адилаар хэвээр үлдэх болно. Үүнээс ч илүү дээр бид энд ямар нэг зүйл өгч чадаагүй тул эдгээр баганууд нь вэбсайтын хэмжээг өөрчлөхөд автоматаар өөрчилдөг бөгөөд тэдгээрийг хариу вэбсайтуудад хамгийн тохиромжтой програм болгож өгдөг. Үүнийг "шугаман блок" хэлбэрээр байрлуулснаар таны 3 хуваагдал нь агуулгын баганатай байх болно.
Багана өргөнийг ашиглах нь
Мөн таны ашиглаж болох "багана-тоолуур" -аас гадна таны байршлын хэрэгцээ шаардлагаас хамааран таны сайтын хувьд илүү сайн сонголт байж болох юм. Энэ бол "багана-өргөн" юм. Өмнөх харуулсантай ижил HTML тэмдэглэгээг ашиглан бидний CSS дээр үүнийг хийж болно:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; багана-өргөн: 500px; -moz-багана-ялгаа: 30px; -webkit-column-gap: 30px; багана-ялгаа: 30px; } .content div {display: inline-block; } Энэ хөтөч нь хөтөч нь "баганын өргөн" -ийг тухайн баганын хамгийн их утга болгон ашигладаг явдал юм. Хэрвээ хөтчийн цонх нь 500 пикселээс бага байвал эдгээр гурван хэлтэс нь нэг баганатай, нөгөө нэгнийх нь орой дээр гарч ирнэ. Энэ нь хөдөлгөөнт / жижиг дэлгэцийн загварт ашигладаг энгийн загвар юм.
Хөтчийн өргөн багана нь баганын цоорхойтой хамт 2 баганатай таарах хангалттай том байх тохиолдолд хөтөч нь нэг баганын байрлалаас хоёр багана руу автоматаар явах болно. Дэлгэцийн өргөнийг үргэлжлүүлээд эцэст нь 3 баганын дизайн авах болно. Дахин хэлэхэд, энэ нь хариу арга хэмжээ авах, олон төрлийн төхөөрөмжтэй, найрсаг байрлалд орох гайхалтай арга мөн та хэвлэлийн загварын өөрчлөлтийг хийх шаардлагагүй.
Бусад баганын шинж чанар
Энд харуулсан шинж чанаруудаас гадна "багана-дүрэм" -д зориулсан шинж чанарууд, түүний дотор баганын хооронд дүрмүүд үүсгэх боломжтой өнгөнүүд, хэв маяг, өргөний утгууд орно. Хэрвээ та багануудыг тусгаарлах шугамтай байхыг хүсвэл хилийн оронд эдгээрийг ашиглах болно.
Туршилтын цаг
Одоо CSS-н олон баганын зурагт сайн дэмжигддэг. Оршилын хувьд, вэб хэрэглэгчдийн 94% нь эдгээр хэв маягийг харах боломжтой бөгөөд дэмжигдээгүй бүлэг нь интернетийн браузерын хуучин хувилбарууд байх бөгөөд та цаашид үргэлжлүүлэн дэмжихгүй байж магадгүй юм.
Энэ түвшний дэмжлэг одоо байгаа үед CSS Columns дээр туршилт хийж, эдгээр хэв маягийг үйлдвэрлэлийн бэлэн вэбсайтад байрлуулах шалтгаан байхгүй болно. Та энэ нийтлэлд оруулсан HTML болон CSS ашиглан өөрийн туршилтыг эхлүүлж, сайтынхаа байршлын хэрэгцээнд хамгийн сайн тохирох зүйлсийг харахын тулд өөр өөр утгуудтай тоглоно.
Болж буй үйл явдлууд h2>
Агуулга энд очих болно ... h2> p>
Эдгээр олон багана үүсгэх CSS нь өмнө нь харсан зүйлүүдээс эхэлдэг:
.content {-moz-column-count: 3; -webkit-column-count: 3; багана-тоо: 3; -moz-багана-ялгаа: 30px; -webkit-column-gap: 30px; багана-ялгаа: 30px; }Одоо энэ асуудал нь хөтөч энэ агуулгыг хуваахыг хүсдэг учраас эдгээр хувиудын агуулгын үргэлж өөр өөр байх тохиолдолд хөтөч нь тусдаа хуваагдлын агуулгыг хувааж, эхлэлийг нэг багананд нэмж өгнө. дараа нь өөр нэг хэсэг рүү үргэлжлүүлэн явуул (туршилтыг ажиллуулахын тулд энэ кодыг ашиглан үүнийг харж болно.
Энэ бол таны хүссэн зүйл биш юм. Та эдгээр хувиудыг тус тусад нь баганаар үүсгэхийг хүсч байгаа бөгөөд хуваах хичнээн том, жижиг байхаас үл хамааран үүнийг салгахыг хэзээ ч хүсэхгүй. Та энэ нэг нэмэлт CSS мөрийг нэмж үүнийг хийж чадна:
.dividing div {display: inline-block; }Энэ нь "контент" доторх эдгээр хэсгүүдийг үүнийг олон багананд хуваасантай адилаар хэвээр үлдэх болно. Үүнээс ч илүү дээр бид энд ямар нэг зүйл өгч чадаагүй тул эдгээр баганууд нь вэбсайтын хэмжээг өөрчлөхөд автоматаар өөрчилдөг бөгөөд тэдгээрийг хариу вэбсайтуудад хамгийн тохиромжтой програм болгож өгдөг. Үүнийг "шугаман блок" хэлбэрээр байрлуулснаар таны 3 хуваагдал нь агуулгын баганатай байх болно.
Багана өргөнийг ашиглах нь
Мөн таны ашиглаж болох "багана-тоолуур" -аас гадна таны байршлын хэрэгцээ шаардлагаас хамааран таны сайтын хувьд илүү сайн сонголт байж болох юм. Энэ бол "багана-өргөн" юм. Өмнөх харуулсантай ижил HTML тэмдэглэгээг ашиглан бидний CSS дээр үүнийг хийж болно:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; багана-өргөн: 500px; -moz-багана-ялгаа: 30px; -webkit-column-gap: 30px; багана-ялгаа: 30px; } .content div {display: inline-block; }Энэ хөтөч нь хөтөч нь "баганын өргөн" -ийг тухайн баганын хамгийн их утга болгон ашигладаг явдал юм. Хэрвээ хөтчийн цонх нь 500 пикселээс бага байвал эдгээр гурван хэлтэс нь нэг баганатай, нөгөө нэгнийх нь орой дээр гарч ирнэ. Энэ нь хөдөлгөөнт / жижиг дэлгэцийн загварт ашигладаг энгийн загвар юм.
Хөтчийн өргөн багана нь баганын цоорхойтой хамт 2 баганатай таарах хангалттай том байх тохиолдолд хөтөч нь нэг баганын байрлалаас хоёр багана руу автоматаар явах болно. Дэлгэцийн өргөнийг үргэлжлүүлээд эцэст нь 3 баганын дизайн авах болно. Дахин хэлэхэд, энэ нь хариу арга хэмжээ авах, олон төрлийн төхөөрөмжтэй, найрсаг байрлалд орох гайхалтай арга мөн та хэвлэлийн загварын өөрчлөлтийг хийх шаардлагагүй.
Бусад баганын шинж чанар
Энд харуулсан шинж чанаруудаас гадна "багана-дүрэм" -д зориулсан шинж чанарууд, түүний дотор баганын хооронд дүрмүүд үүсгэх боломжтой өнгөнүүд, хэв маяг, өргөний утгууд орно. Хэрвээ та багануудыг тусгаарлах шугамтай байхыг хүсвэл хилийн оронд эдгээрийг ашиглах болно.
Туршилтын цаг
Одоо CSS-н олон баганын зурагт сайн дэмжигддэг. Оршилын хувьд, вэб хэрэглэгчдийн 94% нь эдгээр хэв маягийг харах боломжтой бөгөөд дэмжигдээгүй бүлэг нь интернетийн браузерын хуучин хувилбарууд байх бөгөөд та цаашид үргэлжлүүлэн дэмжихгүй байж магадгүй юм.
Энэ түвшний дэмжлэг одоо байгаа үед CSS Columns дээр туршилт хийж, эдгээр хэв маягийг үйлдвэрлэлийн бэлэн вэбсайтад байрлуулах шалтгаан байхгүй болно. Та энэ нийтлэлд оруулсан HTML болон CSS ашиглан өөрийн туршилтыг эхлүүлж, сайтынхаа байршлын хэрэгцээнд хамгийн сайн тохирох зүйлсийг харахын тулд өөр өөр утгуудтай тоглоно.