ניצן די CSS לאָזנ שווימען פּראָפּערטי צו דיזיין וועב בלאַט לייאַוץ
די קסס פאַרמאָג איז אַ זייער וויכטיק פאַרמאָג פֿאַר אויסלייג. עס אַלאַוז איר צו פּאָזיציע דיין וועב בלאַט דיזיינז פּונקט ווי איר ווילן זיי צו אַרויסווייַזן-אָבער אין סדר צו נוצן עס איר האָבן צו פֿאַרשטיין ווי עס אַרבעט.
אין אַ נוסח בלאַט, די קסס פלאָוט פאַרמאָג קוקט ווי דאָס:
.right {פלאָוט: רעכט; }
דעם דערציילט דעם בלעטערער אַז אַלץ מיט די קלאַס פון "רעכט" זאָל זיין פלאָוטיד צו די רעכט.
איר וואָלט באַשטימען עס ווי דאָס:
קלאַס = "רעכט" />
וואָס קענען איר פלאָוט מיט די CSS לאָזנ שווימען פאַרמאָג?
איר קענען נישט לאָזנ שווימען יעדער עלעמענט אויף אַ וועב בלאַט. איר קענען בלויז לאָזנ שווימען בלאָק-מדרגה עלעמענטן. דאס זענען די עלעמענטן וואס נעמען אַרויף אַ בלאָק פון פּלאַץ אויף דער בלאַט, ווי בילדער (), פּאַראַגראַפס (), דיוויזשאַנז (), און רשימות ().
אנדערע עלעמענטן וואָס ווירקן טעקסט, אָבער טאָן ניט מאַכן אַ קעסטל אויף די בלאַט גערופן ינלינע עלעמענטן און קענען ניט זיין פלאָוטיד. די זענען עלעמענטן ווי שפּאַן (), שורה ברייקס (), שטאַרק טראָפּ (), אָדער ייטאַליקס ().
ווו טאָן זיי פלאָוט?
איר קענען לאָזנ שווימען עלעמענטן רעכט אָדער לינקס. קיין עלעמענט וואָס גייט די פלאָוטאַד עלעמענט וועט לויפן אַרום די פלאָוטאַד עלעמענט אויף די אנדערע זייַט.
פֿאַר בייַשפּיל, אויב איך פלאָוט אַ בילד צו די לינקס, קיין טעקסט אָדער אנדערע עלעמענטן ווייַטערדיק עס וועט לויפן אַרום אים צו די רעכט. און אויב איך פלאָוט אַ בילד צו די רעכט, קיין טעקסט אָדער אנדערע עלעמענטן ווייַטערדיק עס וועט לויפן אַרום אים צו די לינקס. אַ בילד וואָס איז געשטעלט אין אַ בלאָק פון טעקסט אָן קיין פלאָוט נוסח געווענדט צו עס וועט אַרויסווייַזן אָבער דער בלעטערער איז באַשטימט צו אַרויסווייַזן בילדער.
דעם איז יוזשאַוואַלי מיט דער ערשטער שורה פון ווייַטערדיק טעקסט ווייַזן בייַ די דנאָ פון די בילד.
ווי ווייַט וועט זיי פלאָוט?
א עלעמענט וואָס איז פלאָוטאַד וועט קער ווי ווייַט צו די לינקס אָדער רעכט פון דעם קאַנטיינער עלעמענט ווי עס קענען. דאָס רעזולטאַטן אין עטלעכע פאַרשידענע סיטואַטיאָנס דיפּענדינג אויף ווי דיין קאָד איז געשריבן.
פֿאַר די יגזאַמפּאַלז, איך וועט זיין פלאָוטינג אַ קליין דיוו עלעמענט צו די לינקס:
- אויב די פלאָוטאַד עלעמענט טוט נישט האָבן אַ פאַר - דיפיינד ברייט, עס וועט נעמען אַרויף ווי פיל האָריזאָנטאַל פּלאַץ ווי פארלאנגט און בנימצא, ראַגאַרדלאַס פון די לאָזנ שווימען. באַמערקונג: עטלעכע בראַוזערז פּרווון צו שטעלן עלעמענטן לעבן פלאָוטיד עלעמענטן ווען די ברייט איז נישט דיפיינד-יוזשאַוואַלי געבן די ניט-פלאָוטאַד עלעמענט נאָר אַ קליין פּלאַץ פון פּלאַץ. אַזוי איר זאָל שטענדיק דעפינירן אַ ברייט אויף פלאָוטיד עלעמענטן.
- אויב דער קאַנטיינער עלעמענט איז די HTML עלעמענט, די פלאָוטיד דיוו וועט זיצן אויף די לינקס גרענעץ פון דער בלאַט.
- אויב דער קאַנטיינער עלעמענט איז זיך קאַנטיינד דורך עפּעס אַנדערש, די פלאָוטיד דיוו וועט זיצן אויף די לינקס גרענעץ פון דעם קאַנטיינער.
- איר קענען נעסט פלאָוטאַד עלעמענטן, און אַז קענען רעזולטאַט אין די לאָזנ שווימען סאָף אין אַ חידוש. למשל, דעם לאָזנ שווימען איז אַ לינקס פלאָוטיד דיוו ין אַ רעכט פלאָוטיד דיוו.
- פלאָוטיד עלעמענטן וועלן זיצן ווייַטער צו יעדער אַנדערער אויב עס איז אָרט אין דעם קאַנטיינער. פֿאַר בייַשפּיל, דעם קאַנטיינער האט דרייַ 100 פּקס ברייט דיוו עלעמענטן פלאָוטיד אין אַ 400 פּקס ברייט קאַנטיינער.
איר קענען אַפֿילו נוצן פלאָץ צו מאַכן אַ פאָטאָ גאַלעריע אויסלייג. איר שטעלן יעדער טאַמנייל (עס אַרבעט בעסטער אויב זיי זענען אַלע די זעלבע גרייס) אין אַ דיוו מיט די קעפּל און די פליט די דיוו יסודות אין דעם קאַנטיינער.
קיין ענין ווי ברייט דער בלעטערער פֿענצטער איז, די טהומבנאַילס וועט שורה אַרויף יונאַפאָרמלי.
אויסגעדרייט אַוועק די פלאָוט
אַמאָל איר וויסן ווי צו באַקומען אַן עלעמענט צו לאָזנ שווימען, עס איז וויכטיק צו וויסן ווי צו פאַרמאַכן אַוועק די לאָזנ שווימען. איר קער אַוועק די לאָזנ שווימען מיט די CSS קלאָר פאַרמאָג. איר קענען קלאָר לינקס פלאַץ, רעכט פלאָוץ אָדער ביידע:
קלאָר: לינקס;
קלאָר: רעכט;
קלאָר: ביידע;
קיין עלעמענט וואָס איר שטעלן דעם קלאָר פאַרמאָג פֿאַר וועט דערשייַנען ונטער אַן עלעמענט וואָס איז פלאָוטיד אַז ריכטונג. פֿאַר בייַשפּיל, אין דעם בייַשפּיל די ערשטער צוויי פּאַראַגראַפס פון טעקסט זענען נישט קלירד, אָבער די דריט איז.
שפּיל מיט די קלאָר ווערט פון פאַרשידענע יסודות אין דיין דאקומענטן צו באַקומען פאַרשידענע אויסלייג יפעקץ.
איינער פון די מערסט טשיקאַווע פלאָוטאַד לייאַוץ איז אַ סעריע פון בילדער אַראָפּ די רעכט אָדער לינקס זייַל ווייַטער צו פּאַראַגראַפס פון טעקסט. אפילו אויב די טעקסט איז ניט לאַנג גענוג צו מעגילע פאַרגאַנגענהייַט די בילד, איר קענען נוצן די קלאָר אויף אַלע די בילדער צו מאַכן זיכער אַז זיי דערשייַנען אין די זייַל אלא ווי צו דעם ווייַטער בילד.
די HTML (איבערחזרן דעם פּאַראַגראַף):
איר טאָן ניט דאַרפֿן צו מאַכן אַ יגזאַמז בייַ די פאַקט אַז זיי פאַלן אַראָפּ. קוישבאָל איז ניט אַ פּראָטאָן, וואָס אַרבעט מיט אַ גרויס טאַלאַנט.
די קסס (צו פלאָוט די בילדער צו די לינקס):
img.float {פלאָוט: לינקס;
קלאָר: לינקס;
גרענעץ: 5 פּקס;
}
און צו די רעכט:
img.float {פלאָוט: רעכט;
קלאָר: רעכט;
גרענעץ: 5 פּקס;
}
ניצן פלאָץ פֿאַר אויסלייג
אַמאָל איר פֿאַרשטיין ווי די פלאָוט פאַרמאָג אַרבעט, איר קענען אָנהייבן ניצן עס צו לייגן אויס דיין וועב זייַטלעך. דאס זענען די טריט איך נעמען צו שאַפֿן אַ פלאָוטאַד וועב בלאַט:
- פּלאַן די אויסלייג (אויף פּאַפּיר אָדער אין אַ גראַפיקס געצייַג אָדער אין מיין קאָפּ).
- באַשליסן ווו די בלאַט דיוויזשאַנז זענען געגאנגען צו זיין.
- באַשטימען די ברייט פון די פאַרשידן קאַנטיינערז און די יסודות אין זיי.
- לאָזנ שווימען אַלץ. אפילו די ויסווייניקסט קאַנטיינער עלעמענט איז פלאָוטאַד צו די לינקס אַזוי איך וויסן ווו עס וועט זיין אין באַציונג צו דער בלעטערער מיינונג פּאָרט.
ווי לאַנג ווי איר ווייסט די ברייט (פּערסאָנאַגעס זענען פייַן) פון דיין אויסלייג סעקשאַנז, איר קענען נוצן די פלאָוט פאַרמאָג צו שטעלן זיי ווו זיי געהערן אויף די בלאַט. און די פייַן זאַך איז, איר טאָן ניט האָבן צו זאָרג ווי פיל וועגן די קעסטל מאָדעל וואָס איז אַנדערש פֿאַר Internet Explorer אָדער פירעפאָקס.