פֿאַר פילע יאָרן, CSS פלאַץ האָבן שוין אַ פינאַקי, אָבער נייטיק, קאָמפּאָנענט אין שאפן וועבזייַטל לייאַוץ. אויב דיין פּלאַן איז גערופן פֿאַר קייפל שפאלטן, איר פארקערט צו פלאָוץ . דער פּראָבלעם מיט דעם אופֿן איז אַז, טראָץ די ינקרעדאַבלי ינדזשאַנואַטי אַז וועב דיזיינערז / דעוועלאָפּערס האָבן געוויזן אין שאפן קאָמפּלעקס פּלאַץ לייאַוץ, קסס פלאָוץ זענען קיינמאָל טאַקע טייַנען צו זיין געניצט אין דעם וועג.
בשעת פלאַץ און קסס פּאַזישאַנינג זענען זיכער צו האָבן אַ פּלאַץ אין וועב פּלאַן פֿאַר פילע יאָרן צו קומען, נייַער אויסלייג טעקניקס אַרייַנגערעכנט CSS גריד און פלעקסבאָקס זענען איצט געבן וועב דיזיינערז נייַ וועגן צו מאַכן זייער פּלאַץ לייאַוץ. אן אנדער נייע אויסלייג טעכניק וואָס ווייזט גורל פון פּאָטענציעל איז קסס מער ווי איין קאָלומנס.
CSS Columns זענען שוין פֿאַר אַ ביסל יאָרן איצט, אָבער פעלנדיק פון שטיצן אין עלטערע בראַוזערז (דער הויפּט עלטערע ווערסיעס פון Internet Explorer) האט געהאלטן פילע וועב פּראָפעססיאָנאַלס פון ניצן די סטיילז אין זייער פּראָדוקציע אַרבעט.
מיט דעם סוף פון שטיצן פֿאַר די עלטערע ווערסיעס פון הייסט, עטלעכע וועב דיזיינערז זענען איצט עקספּעראַמענטינג מיט נייַ קסס אויסלייג אָפּציעס, קסס קאָלומנס אַרייַנגערעכנט, און געפונען אַז זיי האָבן אַזוי פיל מער קאָנטראָל מיט די נייַ אַפּראָוטשיז ווי זיי האבן מיט פלאָוץ.
די באַסיקס פון קסס קאָלומנס
ווי זייַן נאָמען סאַגדזשעסץ, CSS מער ווי איין קאָלומנס (אויך באקאנט ווי קסס 3 Multi- זייַל אויסלייג) אַלאַוז איר צו שפּאַלטן צופרידן אין אַ סכום נומער פון שפאלטן. די מערסט גרונט CSS פּראָפּערטיעס אַז איר וואָלט נוצן זענען:
- זייַל-ציילן
- column-gap
פֿאַר זייַל-ציילן, איר ספּעציפיצירן די נומער פון שפאלטן איר ווילן. די זייטן גאַפּ וואָלט זיין די גאַדערז אָדער ספּייסינג צווישן די שפאלטן. דער בלעטערער וועט נעמען די וואַלועס און שפּאַלטן די צופרידן יוואַנלי אין די נומער פון שפאלטן איר ספּעציפיצירן.
א פּראָסט בייַשפּיל פון קסס קייפל שפאלטן אין פיר וואָלט זיין צו שפּאַלטן אַ בלאָק פון טעקסט צופרידן אין קייפל שפאלטן, ענלעך צו וואָס איר וואָלט זען אין אַ צייַטונג אַרטיקל. זאָגן איר האָבן די פאלגענדע HTML מאַרקאַפּ (טאָן אַז פֿאַר בייַשפּיל צוועקן, איך בין בלויז פּאַטינג דער אָנהייב פון איין פּאַראַגראַף, בשעת אין פיר עס וואָלט מסתּמא זייַן אַ פּלאַץ פון פּאַראַגראַפס פון צופרידן אין דעם מאַרקאַפּ):
די כעדינג פון דיין אַרטיקל
ימאַדזשאַן אַ פּלאַץ פון פּאַראַגראַפס פון טעקסט דאָ ...
אויב איר דעמאָלט געשריבן די CSS סטיילז:
.קאָנטענט {-מאָז-זייַל-ציילן: 3; -וועבקיט-זייַל-ציילן: 3; זייַל-ציילן: 3; -מאָז-זייַל-ריס: 30 פּקס; -webkit-column-gap: 30px; זייַל-גאַפּ: 30 פּקס; }דעם קסס הערשן וואָלט שפּאַלטן די "צופרידן" אָפּטייל אין 3 גלייַך שפאלטן מיט אַ ריס פון 30 פּיקסעלס צווישן זיי. אויב איר געוואלט צוויי שפאלטן אַנשטאָט פון 3, איר וואָלט פשוט טוישן דעם ווערט און דער בלעטערער וואָלט רעכענען די נייַ ברייט פון די שפאלטן צו שפּאַלטן די צופרידן יוואַנלי. באמערקט אַז מיר נוצן די ווענדאָר-פּרעפיקסעד פּראָפּערטיעס ערשטער, נאכגעגאנגען דורך די ניט-פּריפיסטיד דעקלעריישאַנז.
ווי גרינג ווי דאָס איז, זייַן נוצן אין דעם וועג איז פּראָבלעמאַטיש פֿאַר וועבזייַטל נוצן. יא, איר קענען שפּאַלטן אַ בינטל פון צופרידן אין קייפל שפאלטן, אָבער דאָס קען נישט זיין דער בעסטער לייענען דערפאַרונג פֿאַר די וועב, ספּעציעל אויב די הייך פון די שפאלטן פאלן אונטער די "קנאַל" פון דעם עקראַן.
די לייענער וועלן דאַן זיין מעגילע אַרויף און אַראָפּ אין סדר צו לייענען דעם פול צופרידן. נאָך די הויפּט פון קסס קאָלומנס איז ווי גרינג ווי איר זען דאָ, און עס קענען זיין געניצט צו טאָן אַזוי פיל מער ווי נאָר שפּאַלטן די אינהאַלט פון עטלעכע פּאַראַגראַפס - עס קען, טאַקע, זיין געניצט פֿאַר אויסלייג.
אויסלייג מיט קסס קאָלומנס
זאָגן אַז איר האָט אַ וועבזייטל מיט אַ אינהאַלט געגנט וואָס האט 3 שפאלטן פון אינהאַלט. דאָס איז אַ זייער טיפּיש וועבזייטל פּלאַן, און צו דערגרייכן די 3 שפאלטן, איר וואָלט נאָרמאַלי לאָזנ שווימען די דיוויזשאַנז וואָס זענען אין. מיט קסס קייפל-שפאלטן, עס איז אַזוי פיל גרינגער.
דאָ איז עטלעכע מוסטער HTML:
לעצט נייַעס
אינהאַלט וואָלט גיין דאָ ...
פון אונדזער בלאָג
אינהאַלט וואָלט גיין דאָ ...
אַפּקאַמינג געשעענישן
אינהאַלט וואָלט גיין דאָ ...
די קסס צו מאַכן די קייפל שפאלטן סטאַרץ מיט וואָס איר געזען פריער:
.קאָנטענט {-מאָז-זייַל-ציילן: 3; -וועבקיט-זייַל-ציילן: 3; זייַל-ציילן: 3; -מאָז-זייַל-ריס: 30 פּקס; -webkit-column-gap: 30px; זייַל-גאַפּ: 30 פּקס; }איצט, די אַרויסרופן דאָ איז אַז, ווייַל דער בלעטערער וויל צו שפּאַלטן דעם צופרידן יוואַנלי, אַזוי אויב די אינהאַלט לענג פון די דיוויזשאַנז איז אַנדערש, דעם בלעטערער וועט פאקטיש שפּאַלטן די אינהאַלט פון אַ יחיד אָפּטייל, צולייגן דעם אָנהייב פון עס צו איין זייַל און דעמאָלט פאָרזעצן אין אנדערן (איר קענען זען דעם דורך ניצן דעם קאָד צו לויפן אַ עקספּערימענט און לייגן אַנדערש לענגטה פון אינהאַלט ין יעדער אָפּטייל)!
וואָס איז נישט וואָס איר ווילן. איר ווילט יעדער פון די דיוויזשאַנז צו שאַפֿן אַ בוילעט זייַל און, קיין ענין ווי גרויס אָדער קליין אַ יחיד אָפּטייל ס צופרידן, איר קיינמאָל ווילן עס שפּאַלטן. איר קענען דערגרייכן דעם דורך צולייגן דעם איין נאָך שורה פון קסס:
.קאַנטענט div {ווייַז: ינלינע-בלאָק; }דעם וועט צווינגען די דיוויזשאַנז וואָס זענען ין פון די "צופרידן" צו בלייַבן בעשאָלעם אַפֿילו ווי דער בלעטערער ספּליץ דעם אין קייפל שפאלטן. אפילו בעסער, זינט מיר האָבן נישט געגעבן אַ פאַסטן ברייט, די שפאלטן וועט אויטאָמאַטיש רעסיזע ווי דער בלעטערער רעסיזיז, מאכן זיי אַ ידעאַל אַפּלאַקיישאַן פֿאַר אָפּרופיק וועבסיטעס . מיט דעם "ינלינע-בלאָק" נוסח אין אָרט, יעדער פון דיין 3 דיוויזשאַנז וועט זיין אַ בוילעט זייַל פון אינהאַלט.
ניצן זייַל-ברייט
עס איז אן אנדער אייגנטום אויסער "שפראך-ציילן", וואָס איר קענט נוצן, און לויט דיין אויסלייג באדערפענישן, עס קען זיין אַ בעסער ברירה פֿאַר דיין פּלאַץ. דעם איז "זייַל-ברייט". ניצן די זעלבע HTML מאַרקאַפּ ווי געוויזן פריער, מיר געקענט אָנשטאָט דעם מיט אונדזער קסס:
.קאָנטענט {-מאָז-זייַל-ברייט: 500 פּקס; -וועבקיט-זייַל-ברייט: 500 פּקס; זייַל-ברייט: 500 פּקס; -מאָז-זייַל-ריס: 30 פּקס; -webkit-column-gap: 30px; זייַל-גאַפּ: 30 פּקס; } .content div {display: inline-block; }דער וועג אַז דאָס אַרבעט איז אַז דער בלעטערער ניצט דעם "זייַל-ברייט" ווי די מאַקסימום ווערט פון דעם זייַל. אַזוי אויב דער בלעטערער פֿענצטער איז ווייניקער ווי 500 פּיקסעלס ברייט, די 3 דיוויזשאַנז וואָלט דערשייַנען אין אַ איין זייַל, איינער פון די טאַפּס פון אנדערן. דעם איז אַ טיפּיש אויסלייג געניצט פֿאַר רירעוודיק / קליין פאַרשטעלן לייאַוץ.
ווי דער בלעטערער ברייט ינקריסיז צו זיין גרויס גענוג צו באַשטימען 2 שפאלטן צוזאמען מיט די ספּעסאַפייד זייַל גאַפּס, דער בלעטערער וועט אויטאָמאַטיש גיין פון אַ איין זייַל אויסלייג צו צוויי שפאלטן. האַלטן ינקריסינג די פאַרשטעלן ברייט און יווענטשאַוואַלי, איר וועט באַקומען אַ 3 זייַל פּלאַן, יעדער פון אונדזער 3 דיוויזשאַנז ווייַזן אין זייער אייגן זייַל. ווידער, דעם איז אַ גרויס וועג צו באַקומען עטלעכע אָפּרופיק, מאַלטי-מיטל פרייַנדלעך לייאַוץ, און איר טאָן ניט אפילו דאַרפֿן צו נוצן מידיאַ קוויריז צו טוישן די אויסלייג סטיילז!
אנדערע קאָלום פּראָפּערטיעס
אין דערצו צו די פּראָפּערטיעס באדעקט דאָ, עס זענען אויך פּראָפּערטיעס פֿאַר "זייַל-הערשן", אַרייַנגערעכנט קאָלירן, סטיל, און ברייט וואַלועס וואָס לאָזן איר צו שאַפֿן כּללים צווישן דיין שפאלטן. די וואָלט זיין געוויינט אַנשטאָט פון געמארקן אויב איר ווילן צו האָבן עטלעכע שורות סעפּערייטינג דיין שפאלטן.
צייט צו עקספּערימענט
דערווייַל CSS Multiple Column Layout איז זייער געזונט געשטיצט. מיט פּרעפיקס, איבער 94% פון וועב ניצערס קענען זען די סטיילז, און אַז די אַנסאַפּאָרטיד גרופּע וואָלט טאַקע נאָר זיין אלטע ווערסיעס פון Internet Explorer וואָס איר קען ניט זיין סופּפּאָרטינג ענימאָר סייַ ווי סייַ.
מיט דעם מדרגה פון שטיצן איצט אין אָרט, עס איז קיין סיבה נישט צו אָנהייבן עקספּערימענטינג מיט קסס קאָלומנס און דיפּלויינג די סטיילז אין פּראָדוקציע גרייט וועבסיטעס. איר קענען אָנהייבן דיין יקספּעראַמאַנץ ניצן די HTML און CSS דערלאנגט אין דעם אַרטיקל און שפּיל אַרום מיט פאַרשידענע וואַלועס צו זען וואָס וואָלט אַרבעט בעסטער פֿאַר דיין פּלאַץ ס 'דאַרף.