ለብዙ አመታት, የሲ.ኤስ.ኤስ ተንሳፋፊዎች የድር ጣቢያ አቀማመጦችን በመፍጠር ረገድ በጣም ጥብቅ ሆኖም አስፈላጊ ናቸው. ንድፍዎ በርካታ ዓምዶችን ካጠጣዎ, ወደ ተንሳፋፊነት ዞረ . በዚህ ዘዴ ውስጥ ያለው ችግር የድር ዲዛይነሮች / ገንቢዎች ውስብስብ የጣቢያ አቀማመጦችን በመፍጠር የሚያሳዩ እጅግ በጣም የሚያስደንቀው ቢሆንም, የሲ ኤስ አይነታዎች በዚህ መንገድ ጥቅም ላይ ሊውሉ አይችሉም.
ተንሳፋፊ እና የሲኤስኤል አቀማመጥ ለበርካታ አመታት በድር ንድፍ ውስጥ ቦታ ሊኖራቸው እንደሚችሉ ቢረጋገጡ, ሲዲ ሴንተር እና Flexbox ጨምሮ አዳዲስ አቀማመጦች ቴክኒኮችን የድረገፅ አቀማመጦችን ለመፍጠር አዳዲስ መንገዶችን ይሰጣሉ. ብዙ ተጨማሪ እምቅ ሃሳቦችን የሚያሳዩ ሌላ አዲስ የአቀማመጥ ዘዴ የ CSS በርካታ ዓምዶች ናቸው.
CSS የቆዳ ዓምዶች ለጥቂት አመታት ቆይተዋል, ነገር ግን በአሮጌ አሳሾች (በተለይ በአብዛኛው የድሮ የ Internet Explorer ስሪቶች) ብዙ የድር ባለሙያዎች በምርምር ስራዎቻቸው እንዳይጠቀሙባቸው አስችሏቸዋል.
ለእነዚያ የቆዩ የ IE ስሪቶች የድጋፍ ማሻሻያ ድጋሜዎች አንዳንድ የድር ዲዛይነሮች አሁን በአዲስ የሲኤስ ሲስ አቀማመጥ አማራጮች, የሲኤስኤል ዓምዶች ውስጥ ተካተዋል, እና ከአንዳንድ ተንሸራታቾች ይልቅ ከነዚህ አዳዲስ መንገዶች የበለጠ ቁጥጥር እንዳላቸው እያገኙ ነው.
የ CSS የቆጠራ ዓበይት መሰረታዊ ነገሮች
ስሙ እንደሚጠቅስ, የ CSS በርካታ ዓምዶች (እንዲሁም CSS3 ባለ ብዙ አምድ አቀማመጥ ተብሎም ይታወቃል) ይዘትን በተወሰኑ የአምዶች ብዛት እንዲከፍሉ ያስችልዎታል. የሚጠቀሙባቸው በጣም የ CSS ባህሪያት እነዚህ ናቸው
- የአምድ-ቆጠራ
- የዓምድ-ክፍተት
ለዓምድ-ቆጠራ, የሚፈልጉትን የዓምድዎች ብዛት ይጠቁማሉ. የአምዶች ክፍተት መጠነቂያዎች ወይም በነዚህ አምዶች መካከል ያለው ክፍተት ነው. አሳሹ እነዚህን እሴቶች ይወስድና ይዘቱን በተጠቀሱት አምዶች ቁጥር መሰረት ይከፋፍላል.
የሲኤስሲ ብዙ ዓምዶች የተለመዱ ምሳሌዎች በፅሑፍ ዘገባ ላይ ከሚታየው ጋር ተመሳሳይነት ያለው የጽሑፍ ይዘት ወደ በርካታ አምዶች ማካተት ነው. የሚከተለው HTML ምልክት ማድረጊያ አለዎት (ለምሣሌ ለምሳሌ ዓላማዎች, የአንድ አንቀጽ መጀመሪያን ብቻ በማስቀመጥ ላይ ሲሆን, በተግባር ሲውል ግን በዚህ ማተኮር ውስጥ በርካታ አንቀጾች ሊኖሩ ይችላሉ)
የርዕስዎን ርዕስ
በርካታ የአንቀጽ አንቀፆች እዚህ ላይ ይቃኙ
ከዚያም እነዚህን የሲኤስኤስ ቅጦች ከጻፉት
.content {-moz-column-count: 3; -webkit-column-count: 3; የአምድ-ቆጠራ-3; -moz-column-gap: 30px; -webkit-column-gap: 30px; የአምድ-ክፍተት: 30px; }ይህ የሲኤስ ሲደመር የ "ይዘት" ክፍፍል በ 3 እኩል ዓምዶች በ 30 ፒክሰሎች መካከል ልዩነት ይከፍላል. ከ 2 ይልቅ ሁለት ዓምዶችን ማግኘት ከፈለጉ, ያንን እሴት ይለውጡ እና አሳሹ ይዘቱን ለመከፋፈል የእነዚያን ዓምዶች አዲስ ስፋት ያሰላል. አስቀድመንን ቅድመ-ቅጥያዎችን እንደምናከናውን በቀረበው ቅድመ-ቅፅል ተጠቀም.
ይህን ያህል ቀላል ቢሆንም, በዚህ መንገድ ጥቅም ላይ የሚውለው ለድር ጣቢያ አጠቃቀም ነው. አዎ, ብዙ ይዞታዎችን ወደ ብዙ አምዶች መከፋፈል ይችላሉ, ነገር ግን ይህ የእነዚህ ዓምዶች ቁመቱ ከማያ ገጹ "እጥፋት" በታች ከሆነ የድረ-ገፅ ምርጥ የንባብ ልምድ ላይሆን ይችላል.
አንባቢዎች ሙሉ ይዘቱን ለማንበብ ወደላይ እና ወደ ታች መሄድ አለባቸው. አሁንም, የ CSS የቆጠራዎች ርእሰ መምህሩ እዚህ ላይ እንደሚታይ ቀላል ነው እንዲሁም የአንዳንድ አንቀፆች ይዘትን ከመከፋፈፍ በላይ ብዙ ጥቅም ላይ ሊውል ይችላል - ይሄ ለቆንጥሩ ጥቅም ላይ ሊውል ይችላል.
በ CSS የቋሚ አምዶች አቀማመጥ
ባለ 3 የይዘት አምዶች ካለው የይዘት አካባቢ ጋር አንድ ድረ-ገጽ እንዳለዎት ይናገሩ. ይህ በጣም የተለመደ የድር ገጽ አቀማመጥ ነው, እና እነዚያን 3 አምዶች ለማጠናቀቅ, በመደበኛነት የሚገኙትን ክፍሎች ይደምራሉ. በ CSS ብዙ አምዶች, በጣም ቀላል ነው.
አንዳንድ የናሙና ኤችቲኤምኤል እነሆ:
የቅርብ ጊዜ ዜና
ይዘት ወደ እዚህ ይሄድ ነበር ...
ከጦማራችን
ይዘት ወደ እዚህ ይሄድ ነበር ...
የሚቀሩ ዝግጅቶች
ይዘት ወደዚሁ ይሄዳል ... p>
እነዚህ ሁለቱም ዓምዶች ከዚህ በፊት የተመለከቱትን ለመጀመር CSS ላይ CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; የአምድ-ቆጠራ-3; -moz-column-gap: 30px; -webkit-column-gap: 30px; የአምድ-ክፍተት: 30px; }አሁን እዚህ የሚገጥመው ተግዳሮት አሳሽ ይህንን ይዘት እኩል ለመከፋፈል ስለሚፈልግ, የእነዚህ ክፍሎች ልዩነት ርዝመት የተለየ ከሆነ አሳሹ አሳታፊ የግለሰብ ክፍሉን ይዘት ይከፍታል, የመጀመሪያውን ወደ አንድ አምድ እና ከዚያ ወደ ሌላ ሂደት ይቀጥሉ (አንድ ሙከራን ለማካሄድ እና በእያንዳንዱ ክፍል ውስጥ የተለያየ የተለያዩ ርዝመቶችን ለመጨመር ይህንን ኮድ በመጠቀም ይህን ማየት ይችላሉ!)
ያ የምትፈልጉት አይደለም. እያንዳንዳቸው እነዚህ ክፍፍሎች አንድ የተለየ ዓምድ እንዲፈጥሩ ትፈልጋላችሁ እና, የግለሰብ ክፍፍል ይዘት ምን ያህል ትልቅ ወይም ትንሽ ቢመስልም እንዲከፋፈል አይፈልጉም. ይህንን አንድ ተጨማሪ የ CSS ሶኬት በማከል ይህን ማግኘት ይችላሉ:
.content div {display: inline-block; }ይህም "ማሰሺያው" ውስጥ ያሉ ውስጣዊ ክፍሎችን በበርካታ አምዶች እንደተከፋፈለው ሁሉ እንዲቆይ ያደርጋል. ይበልጥ የተሻለ, በዚህ ቋሚ ስፋት ያልሰጠን ስለሆንን, እነዚህ አሻዎች አሳሽ መጠኑ ይቀይረው በራስ-ሰር መጠን ይቀመጣል, ምላሽ ሰጪ ድር ጣቢያዎች በጣም አስፈላጊ መተግበሪያ ነው. በዚያው የ "መስመር ውስጥ" ቅፅበት በእያንዳንዱ ቦታ, እያንዳንዳቸው ሶስት ክፍሎችዎ የተለያዩ የዘለፋ አምዶች ይሆናሉ.
Column-Width በመጠቀም
ከ "ቆጠራ-ቆጠራ" በተጨማሪ ሌላ ንብረት አለ, እና በአሰሪዎ ዝግጅት ላይ በመመርኮዝ, ለጣቢያዎ የተሻለ ምርጫ ሊሆን ይችላል. ይህ "ዓምድ-ስፋት" ነው. ከዚህ ቀደም እንደሚታየው ተመሳሳዩን HTML ምልክት ማድረጊያ በመጠቀም, በ CSS አንሰራራም:
.content {-moz-column-width: 500px; -webkit-አምድ-ስፋት: 500 ፒክስል; የአምድ-ስፋት: 500 ፒክስል; -moz-column-gap: 30px; -webkit-column-gap: 30px; የአምድ-ክፍተት: 30px; } .content div {display: inline-block; }ይሄ የሚሰራበት መንገድ አሳሹ ይህን «አምድ-ስፋት» እንደ ትልቅ አምድ መሆኑን ይጠቀማል. ስለዚህ የአሳሽ መስኮቱ ከ 500 ፒክሰል ስፋት በታች ከሆኑ እነዚህ 3 ክፍሎች በሌላው አናት አንድ ላይ ብቅ ይላሉ. ይህ ለሞባይል / አነስተኛ ማያ ገጽ አቀማመጦች ጥቅም ላይ የዋለ የተለመደ አቀማመጥ ነው.
የአሳሽ ወርድ ከተጣቀሰው የአምድ ክፍተቶች ጋር ለማጣበቅ መጠኑ ትልቅ ከሆነ በአምስት ረድፍ ወደ ሁለት ዓምዶች ይሄዳል. የስክሪኑን ስፋቱ እየጨመረ መሄዱን ይቀጥሉ, እና በመጨረሻም, በእያንዳንዱ ቋሚ አምድዎ ውስጥ ያሉት እያንዳንዳችን 3 ክፍሎች እንደሚታዩ የ 3 አምድ ንድፍ ያገኛሉ. አሁንም, አንዳንድ ምላሽ ሰጭ, ባለብዙ የመሳሪያ ምቹ አቀማመጦችን የሚያገኙበት ጥሩ መንገድ ነው, እና የአቀማመጡ ቅጦች ለመቀየር የመገናኛ ጥያቄዎችን መጠቀም አያስፈልግዎትም!
ሌሎች የአምድ ባህሪያት
ከዚህ በላይ በተዘረዘሩት ንብረቶች በተጨማሪ, በአምዶችዎ መካከል ህጎች እንዲፈጥሩ የሚያስችልዎ ቀለም, ቅጥ, እና ስፋቶችን ጨምሮ ለ "አምድ-ደንብ" ባህሪያት አሉ. እነዚህ ዓምዶችዎን የሚለያዩ መስመሮች እንዲፈልጉ ከፈለጉ ከደብሮች ይልቅ ጥቅም ላይ ሊውሉ ይችላሉ.
ለመሞከር ጊዜ
በአሁኑ ጊዜ የ CSS ብዙ ዓምድ አቀማመጥ በጥሩ ሁኔታ ይደገፋል. በቀዳሚ ቅጥያዎች አማካኝነት ከ 94% በላይ የድር ተጠቃሚዎች እነዚህን ቅጦች ማየት ይችላሉ, እና ምንም ድጋፍ ሳያደርጉ ሊደግፏቸው የማይቻሉ የ Internet Explorer ስሪቶች ናቸው.
በዚህ ደረጃ ያለው ድጋፍ አሁን በቦታው አማካኝነት በ CSS የቆጠራ ልምዶች ለመሞከር እና እነዚህን ቅጦች በስራ ላይ ለማዋል ዝግጁ የሆኑትን ድርጣቢያዎች ስራ ላይ ለማዋል ምንም ምክንያት የለም. በዚህ ጽሁፍ ውስጥ የቀረቡትን ኤችቲኤምኤል እና ሲኤስ በመጠቀም ሙከራዎን መጀመር እና ለጣቢያዎ አቀማመጥ በጣም የተሻለ እንደሚሰራ ለማየት ከተለያዩ እሴቶች ጋር መጫወት ይችላሉ.