د سی ایس ایس فلوټ پوهه

د سی ایس ایس کارول د شتمنیو د ویب پاڼې لیټونو لپاره د ملکیت لیږد کول

د سی ایس ایس ملکیت د لیډ لپاره یو مهم ملکیت دی. دا تاسو ته اجازه درکوي چې خپل ویب پاڼې ډیزاینونه په سمه توګه وټاکئ چې تاسو یې غواړئ - مګر د دې کارولو لپاره تاسو باید پوه شئ چې دا څنګه کار کوي.

په یو طرزالعمل کې، د CSS ساحې ملکیت داسې ښکاري:

سمه (فلټ: حق؛ }

دا برنر ته وایي چې د "حق" ټولګي سره سم باید سم ته وځنډول شي.

تاسو به دا ورته ورته وټاکئ:

ټولګي = "حق" />

تاسو د سی ایس ایس د ځمکې ملکیت سره څه شی کولی شئ؟

تاسو په هر ګورت پاڼه کې هر عنصر نشو کولی. تاسو کولی شئ یوازې د بلاک کچې عناصر وکارولئ. دا هغه عناصر دي چې په پاڼه کې د خلا خنډ پورته کوي لکه انځورونه ()، پراګرافونه ()، ویشونه ()، او لیستونه ().

نور عناصر چې په متن باندې اغیزه کوي، مګر په پاڼه کې یو بکس نه جوړوي د انیلین عناصر په نوم یادیږي او نشي کیدی. دا عناصر لکه span ()، کرښې ماتونې ()، کلک ټینګار ()، یا ایټالیک ().

چیرته چېرې کوي؟

تاسو کولی شئ عناصر ښي او ښي خوا ته وټاکئ. هر هغه عنصر چې د لرې شوي عنصر تعقیب کوي به د فټ شوي عنصر په شاوخوا کې بل لوري ته ځي.

د بېلګې په توګه، که چیرې زه د بائیں لور ته انځور ورکړم، هر هغه متن یا نور عناصر چې د هغې وروسته تعقیب شي دا به په سمه توګه ښي لوري ته وګرځي. او که زه د انځور لپاره یو انځور وباسئ، هر متن یا نور عناصر د هغې په تعقیب کې به د هغې شا او خوا ته نږدې ګرځي. هغه انځور چې د متن په یوه بلاک کې د فلوټ طرز پرته پلي کیږي پرته له دې چې وښيي د براؤزر لپاره انځورونه ښودل شوي.

دا عموما د انځور په ښکته کې ښودل شوي لاندني متن کې لومړی دی.

دوی به څنګه وځیږي؟

هغه عنصر چې ټاکل شوي وي د کانتینر د بائیں یا ښي خوا ته لاړ شي لکه څنګه چې یې کولی شي. دا د ډیری بیلابیلو حالتونو نتیجه کوي چې پدې اړه ستاسو د کوډ لیکل لیکل کیږي.

د دې مثالونو لپاره، زه به د کوچنۍ DIV عنصر په ښي لور کې تیروم.

• که چیرې فټ شوي عنصر مخکې له مخکې ټاکل شوي چوکۍ ونلري، د اړتیا په صورت کې به د افقی ځای ځای ونیسي، مګر د فټ څخه پرته. یادونه: ځینې بربنډان هڅه کوي د فټ شوي عناصرو ترڅنګ عناصر ځای پر ځای کړي کله چې چوکۍ تعریف نه شي- معمولا معمول غیر فضا شوی عنصر یواځې یو کوچنی ځای ورکوي. نو تاسو باید تل د فټ شوي عناصرو چوکۍ تعریف کړئ .
• که د کانتینر عنصر د HTML عنصر وي، ټیټ شوی DIV به د دې پاڼې په ښي خوا کې ناست وي.
• که کنټینر عنصر پخپله د بل کوم بل په واسطه وی، نو ټاکل شوی DIV به د کانتینر په ښي خوا کې ناست وي.
• تاسو کولی شئ د لمر عناصرو سیسټمونه وخورئ، او دا د فټ په پایله کې د حیرانتیا ځای کې پای ته رسېدلی شي. د بیلګې په توګه، دا فټ یو ښی خواړه دی DIV د ښی تیر شوی DIV دننه.
• فلټ شوي عناصر به په یو بل سره ناست وي که چیرې په کانټینر کې خونې شتون ولري. د بیلګې په توګه، دا کانټینر د 400px پراخه کانتینر کې نصب شوي درې 100px پراخه DIV عناصر لري.

تاسو کولی شئ د انځور ګالري ترتیب ترتیب کولو لپاره د فټیوټ څخه کار واخلئ. تاسو هر ټیمفیک کړئ (دا ښه کار کوي کله چې دوی ټول ورته اندازه وي) په DIV کې او د کانټینر په DIV عناصرو کې لوټ کړئ.

کومه مهمه نده چې د لټونګر کړکۍ څومره وي، توبونه به په عین ډول ترتیب کړي.

د Float بندول

یوځل تاسو پوهیږئ چې څنګه د فلوټ عنصر څنګه ترلاسه کړئ، دا مهمه ده چې پوهیږئ چې څنګه د فلوټ بندولو لپاره. تاسو فالټ د سی ایس ایس پاک ملکیت سره بند کړئ. تاسو کولی شئ د ښې بټۍ، ښی لوټ یا دواړه پاک کړئ:

واضح: ښی
واضح: حق؛
واضح کړئ: دواړه؛

هر هغه عنصر چې تاسو یې د پاکولو لپاره واضح ملکیت ټاکئ هغه عنصر ښکاري چې لاندې لارښوونه په ګوته کوي. د بیلګې په توګه، په دې مثال کې د متن لومړی دوه پراګرافونه پاک شوي ندي، مګر دریم یې.

په مختلفو بڼو کې د مختلفو عناصرو روښانه ارزښت سره لوبه وکړئ ترڅو د بیالبیلې ترتیب اغیزو ترلاسه کولو لپاره.

د ترټولو زړه پورې ځایونو څخه یو له انځورونو څخه یوه لړۍ ده چې د متن پیراګرافونو سره سم د ښي او بائیں کالم لاندې. حتی که چېرې متن د تیرو پخوانیو انځورونو لپاره ډیری نه وي، تاسو کولی شئ د ټولو انځورونو په اړه واضح معلومات وکاروئ ترڅو ډاډ ترلاسه کړئ چې دوی د تیر انځور سره بل ځای په کالم کې لیدل کیږي.

HTML (دا پیراګراف بیا وپلټئ):

د دوشنبې په ورځ د ایورورډ ډیورنډ کرښه د ویټومټیت کې د بیرته راګرځیدو په وخت کې د پام وړ اندیښنه ده. کامیبیت غیر پروان، د لابراتوار او د بهرنیو چارو وزارت.

سی ایس ایس (انځورونه بائیں لور ته)

img.float {float: left؛
واضح: ښی
margin: 5px؛
}

او ښي خوا ته:

img.float {float: right؛
واضح: حق؛
margin: 5px؛
}

د لیټ لپاره د Floats کارول

یو ځل چې تاسو پوهیږئ چې د فلایت ملکیت څرنګه کار کوي، تاسو کولی شئ د ویب پاڼې په جوړولو کې د هغې څخه کار واخلئ. دا هغه ګامونه دي چې زه یې د یوې پاڼې ویب پاڼه جوړوم.

• ترتیب (ډیزاین یا د ګرافیک وسیله یا زما په سر کې) ډیزاین کړئ.
• معلوم کړئ چې د پاڼې ویش به څه شی وي.
• د مختلفو کانټینرونو چوکات او عناصر په ګوته کړئ.
• هرڅه لرې کړئ. حتی د بهر بهرنی کانتینر عنصر ته کیڼ ته لیږل کیږي نو زه پوهیږم چې دا به د براوزر لید بندر پورې اړه ولري.

څومره چې تاسو د خپل لیډ لیټ برخې برخې (سلنه فیصده) ښه پوهیږئ، تاسو کولی شئ د فلاټ ملکیت څخه کار واخلئ ترڅو په هغه پاڼه کې چې دوی په پاڼه کې تړاو لري. او ښه خبره دا ده چې تاسو د انټرنیټ ایکسپلورر یا فایرفوکس لپاره د بکس ماډل مختلفو اندیښنو ته اړتیا نلرئ.