ایک ویب صفحو پر متن کی بائیں بطور تصوير فلوٹ کي ڪيئن

سي ڊي استعمال ڪندي هڪ تصوير کي ترتيب ڏيڻ لاء ويب پيج جي کاٻي پاسي تائين

اڄ به تقريبا ڪنهن ويب پيج تي ڏسو ۽ توهان انهن صفحن جي بلڊ ٺاهڻ واري ٽيڪسٽ ۽ تصويرون جو هڪ ميلاپ ڏسي سگهو ٿا. اهو هڪ صفحي ڏانهن ٽيڪسٽ ۽ تصويرون شامل ڪرڻ ۾ تمام آسان آهي. متن جي پيراگراف، فهرستن ۽ عنوانات جي معياري HTML ٽيچ استعمال ڪندي ڪوڊ ڪيو ويو آهي، جڏهن ته تصويرون شامل آهن عنصر استعمال ڪندي.

انهي متن ٺاهڻ ۽ انهن تصويرن کي چڱي طرح ڪم ڪرڻ جي صلاحيت گڏ ٿئي ٿو اهو سٺو ويب ڊزائنر ڌار ڌار ڪري ٿو! توهان صرف پنهنجن لکڻين ۽ تصويرن جي هڪ ٻئي کان پوء ظاهر ٿيڻ نه ٿا چاهيو، اهو ڪيئن آهي ته اهي بلاڪ سطح جي عناصر ترتيب سان ترتيب ڏينداسين. نه، توهان ڪجهه ڪنٽرول چاهيو ٿا ته ٽيڪسٽ ۽ تصويرون وهڻ ۾ گڏوگڏ آخرڪار توهان جي ويب سائيٽ جو بصري ڊزائن ڇا ٿيندو.

تصوير جيڪو هٽايو ويندو آهي انهن صفحي جي بائیں طرف پکڙيل آهي جڏهن ته انهي صفحي جي متن جي چوڌاري ان جي وهڪري جي ڇپيل ڊيزائن ۽ ويب صفحن لاء هڪ عام ڊزائين علاج. ويب اصطلاحن ۾، اهو اثر سچل جي تصوير طور سڃاتو وڃي ٿو . اهو انداز "فلوٽ" لاء سي ايس جي ملڪيت سان حاصل ڪيو آهي. هي ملڪيت سڄي کاٻي پاسي واري کاٻي پاسي واري تصوير جي وهڪري کي وهڻ جي اجازت ڏئي ٿي. (يا چوڌاري هڪ درست قطار تصوير جي کاٻي پاسي کان.) هن بصري اثر ڪيئن حاصل ڪرڻ لاء هڪ نظر رکون ٿا.

HTML سان شروع ڪريو

توهان کي ڪرڻ جي ضرورت آهي ته پهرين شيء ڪجهه آهي HTML سان ڪم ڪرڻ لاء. اسان جي مثال لاء، اسان متن جي پيراگراف لکڻ ۽ پيراگراف (اڳوڻي کان اڳ، پر افتتاح

ٹیگ کان پوء) ۾ تصوير شامل ڪندا. هتي اهو آهي ته جيڪو HTML مارڪ اپ جهڙو ڏسڻ ۾ اچي ٿو:

پيراگراف جو متن هتي اچي ٿو. هن مثال ۾، اسان وٽ هڪ سر شيٽ جي تصوير آهي، تنهن ڪري هي متن ممڪن هجڻ واري شخص جي باري ۾ هوندو، جيڪو سرٽيفڪيٽ لاء آهي.

ڊفالٽ سان، اسان جو ويب پيج متن جي مٿين تصوير سان ڏيکاريندي. اهو ئي سبب آهي جو شڪل HTML ۾ بلاڪ-سطح عناصر آهن. هن جو مطلب آهي ته برائوزر تصوير جي عنصر کان پهريان ۽ بعد کان ڊز ڀڃڪ ڏيکاري ٿو. اسين سيف ڪرڻ جي ذريعي هن ڊفالٽ نظر تبديل ڪندا سين. اول، جيتوڻيڪ اسان ھڪڙو طبقو قدر اسان جي تصوير جي عنصر ڏانھن شامل ڪنداسين. اهو طبقو هڪ "ٿلهو" وانگر ڪم ڪندو جنهن کي اسان اسان جي سي ايس ايس ۾ استعمال ڪنداسين.

پيراگراف جو متن هتي نڪري ٿو. هن مثال ۾، اسان وٽ هڪ سر شيٽ جي تصوير آهي، تنهن ڪري هي متن ممڪن هجڻ واري شخص جي باري ۾ هوندو، جيڪو سرٽيفڪيٽ لاء آهي.

نوٽ ڪريو ته هن ڪلاس جو "بائیں" پنهنجو پاڻ تي ڪابه شيء ڪونهي! اسان جي گهربل انداز حاصل ڪرڻ لاء، اسان کي اڳيان سي ايس استعمال ڪرڻ جي ضرورت آهي.

ايس ايس اسٽس

اسان جي HTML انهي جاء تي، بشمول "بائیں" جي صنف جي خاصيت سميت، اسان هاڻي سي ايس ڏانهن رخ ڪري سگهون ٿا. اسان اسان جي اسٽائل شيٽٽ ۾ هڪ قاعدو شامل ڪري سگهون ٿا جيڪو ان تصوير کي پورو ڪندي ۽ ان جي اڳيان هڪ ننڍڙو پلنگ به شامل ڪندو، انهي ڪري اهو متن جيڪو بالڪل طور تي تصوير ڳولي سگهندو، ان جي ڀيٽ ۾ ان جي ويجهي ڦٽ نه ٿيندي. هتي سي ايس ڊي آهي توهان شايد لکي سگھو ٿا:

.يوft {فلٽ: ڇڏي؛ لڳائڻ: 0 20px 20px 0؛ }

اهو اسلوب جيڪا تصوير کي کاٻي پاسي ڏئي ٿي ۽ ٿورو ٿورو لڳائڻ (ڪجهه CSS شارٽ استعمال ڪندي) تصوير جي ساڄي ۽ هيٺيان تائين.

جيڪڏهن توهان اهو صفحو جو جائزو ورتو آهي ته هي HTML ۾ هڪ برائوزر ۾ شامل آهي، تصوير هاڻي هاڻي ٻنهي جي بجيٽ ۽ متن جي ميلاپ ۾ صحيح طور تي ٻنهي جي وچ ۾ مناسب فاصلي سان درست نظر ايندو. نوٽ ڪيل طبقي جو قدر "بائیں" جو اسان استعمال ڪيو ويندو آھي من پسند. اسان ان کي ڪجهه به سڏيو پيو وڃي ڇاڪاڻ ته "بائیں" اصطلاح پاڻ تي ڪجھ به نٿو رکي. اهو HTML ۾ هڪ صنف خاصيت هجڻ جي ضرورت آهي جيڪو هڪ حقيقي CSS انداز سان ڪم ڪندو آهي جيڪو بصري تبديلين جيڪو توهان ڏسو ٿا اهو ٺاهي ٿو.

انهن طرزن کي حاصل ڪرڻ لاء متبادل طريقا

تصوير ڏيڻ جي اهڙي طريقه هڪ طبقي جي خاصيت ۽ عنصر کي عام سي ايس ڊي سوراخ جو استعمال ڪندي عنصر کي فليٽ ڪري صرف هڪ طريقو آهي جيڪو توهان "بائيڪاٽ ٿيل تصوير" ڏسڻ ۾ اچي ٿو. توھان شايد ڪلاس قيمتي وٺي ھڪڙي مخصوص چونڊيندڙ کي لکڻ سان ايس ايس سي سان تصوير ۽ انداز جو بند ڪري سگھن ٿا. مثال طور، اچو ته هڪ مثال نظر ايندي جتي اهو تصوير ڊويزن جي اندر آهي "مکيه-مواد" جي صنفي قدر سان.