টাস্ক

পৃষ্ঠায় একটি চিত্র যুক্ত করুন যাতে এটি সংলগ্ন পাঠ্যের চারপাশে মোড়ানো হয়।

সমাধান

একটি ছবির চারপাশে টেক্সট মোড়ানো সাধারণত উপাদানগুলিকে কম্প্যাক্টভাবে সাজাতে এবং চিত্র এবং পাঠ্যকে একসাথে লিঙ্ক করতে ব্যবহৃত হয়। আইএমজি সিলেক্টরে যোগ করা ফ্লোট স্টাইল প্রপার্টি ব্যবহার করে মোড়কটি নিজেই তৈরি করা হয়েছে। বাম মান চিত্রটিকে বাম দিকে সারিবদ্ধ করে, ডানে - ডানে। এই ক্ষেত্রে, প্রবাহ অন্যান্য, মুক্ত পক্ষের বরাবর ঘটে।

উদাহরণ 1. ছবির চারপাশে মোড়ানো

HTML5 CSS 2.1 IE Cr Op Sa Fx

লেফটেন্যান্ট বোকাতুয়েভের রিপোর্ট

গতকাল, একটি পুনরুদ্ধার অভিযানের সময়, আমাদের গ্রুপ এলিয়েন ক্যামোফ্লেজ ইউনিফর্মে একটি অজানা শত্রু দ্বারা আক্রমণ করেছিল। কার্যকর প্রতিরক্ষা এবং একটি দ্রুত পাল্টা আক্রমণের ফলে, জঙ্গিদের একটি বড় দলকে পিষে ফেলা হয়েছিল এবং পিছিয়ে দেওয়া হয়েছিল। কর্মীদের মধ্যে কোন হতাহতের ঘটনা নেই। রিকনেসান্স গ্রুপের যোদ্ধারা অস্ত্র ব্যবহারে অসাধারণ দক্ষতা দেখিয়েছিল। যুদ্ধে বিশেষভাবে বিশিষ্ট ছিলেন প্লাটুন নেতা M.A. কুদ্রিয়াশেভ, যিনি তার প্লাটুনের মানব সম্পদকে বুদ্ধিমানের সাথে ব্যবহার করেছিলেন। অপারেশনের ফলস্বরূপ, বহির্জাগতিক সংস্কৃতির উপাদানগুলিকে বন্দী করা হয়েছিল এবং বিশ্লেষণাত্মক গোষ্ঠীতে স্থানান্তর করা হয়েছিল।

বিশ্লেষণাত্মক গ্রুপ থেকে প্রেস রিলিজ

প্রজেক্ট প্যান্ডোরার অংশ হিসেবে আমাদের গোপন গবেষণাগারে সাইকোট্রপিক অস্ত্র তৈরি করা হয়েছিল। একটি ব্যর্থ পরীক্ষার ফলস্বরূপ, বেশিরভাগ বিজ্ঞানী যারা ডিভাইসটিতে কাজ করেছিলেন তারা সাইকোট্রপিক বিকিরণের সংস্পর্শে এসেছিলেন এবং তারা আবেগের অবস্থায় প্রোটোটাইপটিকে আলাদা করে নিয়েছিলেন। সম্ভবত আমাদের বিজ্ঞানীরা এখনও আবেগের অবস্থায় আছেন।

ফলাফল এই উদাহরণচিত্রে দেখানো হয়েছে। 1.

ভাত। 1. চিত্র সহ পাঠ্য

ফ্লোট প্রপার্টি ব্যবহার করা টেক্সটটিকে ইমেজের সাথে শক্তভাবে ফিট করতে বাধ্য করে। অতএব, উদাহরণটি একটি সর্বজনীন সম্পত্তি মার্জিন প্রবর্তন করে, যা চিত্র এবং পাঠ্যের মধ্যে প্যাডিং যোগ করে। এই বৈশিষ্ট্যটি একই সাথে ফটোগুলির উপরে, ডানদিকে, নীচে এবং বামে ইন্ডেন্টেশন সেট করে।

IN মাইক্রোসফ্ট নথিশব্দ প্রায়ই বিভিন্ন ইমেজ আছে. আমি নিশ্চিত যে সময়ে সময়ে আপনাকে তাদের অর্থ অনুসারে ছবি সন্নিবেশ করে যা লেখা হয়েছে তা পাতলা করতে হবে, কারণ এইভাবে তথ্যটি আরও ভালভাবে অনুভূত হয়।

সাইটটিতে বিভিন্ন নিবন্ধ রয়েছে যা আপনাকে Word এ ঢোকানো একটি চিত্রের সাথে কীভাবে সঠিকভাবে কাজ করতে হয় তা নির্ধারণ করতে সহায়তা করবে। যোগ করা ছবি ক্রপ করা যেতে পারে, অথবা ইমেজটিকে Word এ প্রয়োজনীয় কোণে ঘোরানো যেতে পারে। আপনি যদি একটি নথিতে ডানদিকে বা শুধুমাত্র একটি সুন্দর ছবি দেখতে পান, তাহলে আপনি ছবিটি আপনার কম্পিউটারে সংরক্ষণ করতে পারেন।

এই আমরা এই নিবন্ধে মোকাবেলা করা হবে কি. ওয়ার্ডে, টেক্সট শুধুমাত্র পাশ থেকে নয় একটি ছবির চারপাশে প্রবাহিত হতে পারে। এটি এর পিছনে, রূপরেখা বরাবর বা ফ্রেমের চারপাশে স্থাপন করা যেতে পারে। আমার কাছে MS Word 2010 ইনস্টল করা আছে, কিন্তু নেওয়া স্ক্রিনশটগুলি তাদের জন্যও উপযুক্ত হবে যাদের 2007, 2013 বা 2016 ইনস্টল করা আছে, আইটেমগুলির নাম সামান্য ভিন্ন হতে পারে।

নথিতে একটি ছবি যোগ করুন এবং ট্যাবটি খুলতে এটিতে ডাবল ক্লিক করুন "অঙ্কন নিয়ে কাজ করা"- "ফরম্যাট"। তারপর, "সাজানো" গ্রুপে, বোতামে ক্লিক করুন "পাঠ্য মোড়ানো". খোলে প্রসঙ্গ মেনুতে, উপযুক্ত বিকল্পটি নির্বাচন করুন।

পছন্দসই মেনু অন্য উপায়ে খোলা যেতে পারে। ক্লিক করুন ডান ক্লিক করুনছবির উপর মাউস দিয়ে নির্বাচন করুন "পাঠ্য মোড়ানো". এর পরে, সম্ভাব্য বিকল্পগুলি আবার খুলবে।

চলুন সব উপলব্ধ ধরনের মোড়ানোর ঘনিষ্ঠভাবে নজর দেওয়া যাক।

- ফ্রেমের চারপাশে লিখিত বস্তুর বসানো। আপনি মাউস দিয়ে ছবিতে ক্লিক করলে একটি ফ্রেম উপস্থিত হয় - এটি কনট্যুর বরাবর মার্কার সহ একটি আয়তক্ষেত্র। অর্থাৎ, ছবি যদি অনিয়মিত আকারের হয়, তাহলেও লেখাটি আয়তক্ষেত্রে মুদ্রিত হবে।

- এই মোড়ক বস্তুর জন্য সবচেয়ে ভাল ব্যবহার করা হয় বিনামূল্যে ফর্ম, যাতে শব্দগুলি রূপরেখা বরাবর স্থাপন করা হয় এবং ফ্রেমের বরাবর নয়।

"এর মাধ্যমে" - প্রবাহটি ফ্রেমের চারপাশে থাকবে। বস্তুটি সম্পূর্ণরূপে পূর্ণ না হলে এটি ব্যবহার করা ভাল, তবে কিছু আকৃতির খালি জায়গা রয়েছে।

- চিত্রটি আকারে ছোট হলেও এর ডানে বা বামে কিছুই লেখা থাকবে না।

- বস্তুটি মুদ্রিত পাঠ্যের পিছনে স্থাপন করা হবে। অনুগ্রহ করে মনে রাখবেন যে ছবিটি নির্বাচন করার সময়, কনট্যুর বরাবর মার্কার সহ একটি ফ্রেম আছে আপনি এটি সরাতে এবং সম্পাদনা করতে পারেন। কিন্তু যত তাড়াতাড়ি আপনি শব্দ সম্পাদনা বা টাইপ করার দিকে এগিয়ে যান, আপনি আর অঙ্কনটি নির্বাচন করতে পারবেন না, যদি না এর সীমানাগুলি যা লেখা আছে তার বাইরে, অর্থাৎ ডান বা বাম দিকের মার্জিনে প্রসারিত হয়।

ওয়ার্ডে একটি ছবিকে ব্যাকগ্রাউন্ড বানানোর জন্য এই ধরনের মোড়ক ব্যবহার করা হয়। আপনি লিঙ্কটি অনুসরণ করে নিবন্ধে এই সম্পর্কে আরও পড়তে পারেন।

"পাঠ্যের আগে" - চিত্রটি পাঠ্যের উপরেই স্থাপন করা হবে এবং এটিকে কভার করবে।

- এই আইটেমটি নির্বাচন করা যেতে পারে যদি ছবিটি আকারে অনিয়মিত হয়, অথবা আপনি এটিতে শব্দগুলি আংশিকভাবে লিখতে চান। এই ক্ষেত্রে, কালো মার্কার সহ একটি লাল রূপরেখা চিত্রের চারপাশে উপস্থিত হবে। রূপরেখা পরিবর্তন করতে হ্যান্ডলগুলি সরান। আপনি শুধুমাত্র পছন্দসই জায়গায় লাল লাইনে ক্লিক করে এবং মাউস কার্সারটিকে অন্য জায়গায় সরিয়ে নতুন মার্কার যোগ করতে পারেন।

প্রায়শই আপনাকে ছবির ঠিক পাশে, ডান বা বাম দিকে কিছু মুদ্রণ করতে হবে। সমস্ত বর্ণিত পদ্ধতির মধ্যে, প্রবাহ এটির জন্য উপযুক্ত। চিত্রের জন্য এটি নির্বাচন করুন, তারপর বস্তুটিকে নথির পছন্দসই অংশে নিয়ে যান, যাতে পাঠ্যটি উদাহরণের মতো বা বাম দিকে অবস্থিত থাকে।

যদি পাঠ্য থেকে ছবির দূরত্ব উপযুক্ত না হয় তবে আপনি এটি পরিবর্তন করতে পারেন এবং আরও উপযুক্ত মান সেট করতে পারেন।

এটি করতে, ছবিতে ডান ক্লিক করুন এবং থেকে নির্বাচন করুন প্রসঙ্গ মেনু "পাঠ্য মোড়ানো" – .

একটি পৃথক "মার্কআপ" উইন্ডো খুলবে। বিভাগে "পাঠ্য থেকে দূরত্ব"ইমেজ থেকে পাঠ্যটি কোন দিকে অবস্থিত সেই ক্ষেত্রগুলিতে প্রয়োজনীয় মানগুলি নির্দেশ করুন। তারপর "ঠিক আছে" ক্লিক করুন।

উদাহরণস্বরূপ, আমি এই দূরত্ব বৃদ্ধি করেছি।

পরীক্ষা করুন, দেখুন কিভাবে টেক্সটটি চিত্রের ডানদিকে দেখাবে, এর রূপরেখা বরাবর। নথিতে চিত্র এবং পাঠ্যের বিন্যাস নির্বাচন করুন যা আপনার জন্য সবচেয়ে উপযুক্ত।

এই নিবন্ধটি রেট করুন:

একটি ওয়েব পৃষ্ঠার সমস্ত HTML উপাদানগুলি একটি সাধারণ প্রবাহে সাজানো হয়, উপরে থেকে নীচে (ব্লক উপাদানগুলির জন্য) এবং বাম থেকে ডানে (ইনলাইন উপাদানগুলির জন্য)। এই প্রদর্শন পদ্ধতি খুব কার্যকর নয়, তবে CSS এর জন্য ধন্যবাদ আরও ভাল করার জন্য ডিজাইন পরিবর্তন করা সম্ভব।

ভাসমান উপাদান

যখন আপনি একটি ফ্লোটেড উপাদানকে সংজ্ঞায়িত করেন, তখন আপনাকে এটিকে সরাসরি যে উপাদানের নিচে ভাসতে চান সেটিকে কোডে রাখতে হবে। ব্রাউজারগুলি কীভাবে একটি ওয়েব পৃষ্ঠায় ভাসমান উপাদান এবং অন্যান্য সামগ্রী লোড করে তা ঘনিষ্ঠভাবে দেখে নেওয়া যাক৷

প্রথমত, ব্রাউজার সাধারণ ক্রমে পৃষ্ঠায় উপাদানগুলি লোড করে, উপরে থেকে নীচের দিকে চলে যায়, যখন এটি একটি ভাসমান উপাদানের মুখোমুখি হয়, এটি এটিকে নির্দিষ্ট দিকে রাখে। ব্রাউজার এই উপাদানটিকে সাধারণ প্রবাহ থেকে বাদ দেয় এবং ফলস্বরূপ এটি পৃষ্ঠায় "ফ্লোট" করে।

যেহেতু ভাসমান উপাদানটিকে সাধারণ প্রবাহ থেকে বাদ দেওয়া হয়েছিল, কোডে থাকা অবশিষ্ট ব্লক উপাদানগুলি পৃষ্ঠায় লোড করার পরে এমনভাবে লোড করা হয় যেন এই উপাদানটি সেখানে ছিল না। নোট করুন যে ব্লক উপাদানগুলি ভাসমান উপাদানের নীচে স্থাপন করা হয়েছে, এর কারণ হল ভাসমান উপাদানটি আর সামগ্রিক প্রবাহের অংশ নয়।

আপনি যদি ছবিটি ঘনিষ্ঠভাবে দেখেন, আপনি দেখতে পাবেন যে ব্লক উপাদানগুলির বিপরীতে, ইনলাইন উপাদান বা সাধারণ পাঠ্য স্থাপন করার সময় ব্লক উপাদান, ভাসমান উপাদানের সীমাকে সম্মান করা হয়, তাই ইনলাইন উপাদান এবং পাঠ্য এটির চারপাশে প্রবাহিত হয়।

মনে রাখবেন যে আপনি একাধিক ভাসমান উপাদান এক সারিতে রাখতে পারেন যদি মূল উপাদানটির প্রস্থ এটির অনুমতি দেয়।

দ্রষ্টব্য: পরম এবং স্থির অবস্থানের উপাদানগুলি ফ্লোট সম্পত্তি উপেক্ষা করে।

সঙ্গে CSS ব্যবহার করে float বৈশিষ্ট্য চিত্রটি বাম দিকে ভাসানোর জন্য তৈরি করা হয়েছিল।

ছবির নিচের এইচটিএমএল কোডে থাকা টেক্সটটি ছবির চারপাশে ডান ও নিচের দিকে মোড়ানো হবে।

চেষ্টা করুন »

একটি ছবি এবং এর চারপাশে মোড়ানো পাঠ্যের মধ্যে খালি স্থান তৈরি করতে, আপনাকে ছবিতে প্যাডিং যুক্ত করতে হবে। যেহেতু ইমেজটি প্যারেন্ট এলিমেন্টের বাম সীমানায় অফসেট করা হয়েছে, তাই এটি থেকে টেক্সটটিকে সামান্য দূরে সরানোর জন্য শুধুমাত্র ডান এবং নীচে প্যাডিং যোগ করা যথেষ্ট হবে:

Img ( float: left; margin: 0 10px 10px 0; ) চেষ্টা করুন »

মোড়ানো বাতিল করুন কখনও কখনও আপনি একটি উপাদান প্রদর্শন করতে চান যাতে এটি তার সামনে ভাসমান উপাদান দ্বারা প্রভাবিত না হয়। যেমন একটি উপাদান, উদাহরণস্বরূপ, ফুটার হতে পারে, যা যেকোন ক্ষেত্রে পৃষ্ঠার অন্যান্য সমস্ত উপাদানের অধীনে প্রদর্শিত হওয়া উচিত। আপনার পৃষ্ঠা উচ্চ আছেপাশের মেনু ওয়েব পৃষ্ঠার বাম প্রান্তে অবস্থিত, ফুটার উপরে উঠতে পারে এবং এটির ডানদিকে প্রদর্শিত হতে পারে। তাই পৃষ্ঠায় অবস্থান করার পরিবর্তে, ফুটারের বিষয়বস্তু সাইডবারের সাথে ফ্লাশ প্রদর্শিত হবে।এই সমস্যা

এটি পরিষ্কার সম্পত্তি ব্যবহার করে সমাধান করা হয়, যা ব্রাউজারকে বলে যে উপাদানটি স্টাইল করা হচ্ছে তা ভাসমান উপাদানটির চারপাশে মোড়ানো উচিত নয়।

• CSS স্পষ্ট সম্পত্তি নিম্নলিখিত মানগুলির মধ্যে একটিতে সেট করা যেতে পারে:
• বাম - ভাসমান উপাদানগুলি বাম দিকে অনুমোদিত নয়। ডান - ভাসমান উপাদান অনুমোদিত নয়.
• ডান দিকে
• উভয় - ভাসমান উপাদান উভয় দিকে নিষিদ্ধ।

প্রায়শই, লেআউট ডিজাইনারকে কিছু অ-মানক কাজ দেওয়া হয়। আমাদের লক্ষ্য হল সবচেয়ে যুক্তিযুক্ত এবং সঠিক সমাধান প্রদান করা। আজ আমরা একটি চিত্রের চারপাশে পাঠ্য মোড়ানোর বৈশিষ্ট্যগুলি সম্পর্কে কথা বলব।

সমস্যার বিবৃতি

আপনার জন্য একটি নিবন্ধ লেখা তথ্য সম্পদঅথবা একটি ব্লগ প্রায়শই পাঠ্য উপস্থাপনের সময় ছেদযুক্ত চিত্রগুলির সাথে থাকবে৷ যেহেতু অনুসন্ধান রোবটটি সর্বদা সাইটে ছবির উপস্থিতিকে সম্মান করে, ব্যবহারকারী উজ্জ্বল চিত্র সহ পাঠ্যের সাথে আরও খুশি হবে। তাই একটি বিশেষ বিন্যাস পদ্ধতি ইনস্টল করার প্রয়োজন যা পাঠ্য এবং ছবির মধ্যে একটি সুন্দর মিথস্ক্রিয়া নিশ্চিত করবে।

টেক্সট মোড়ানো প্রয়োজন হয় না যখন কেস বিবেচনা করা যাক। তদুপরি, আমি একটি সর্বজনীন বিকল্প অফার করি - একটি ছবির অনুপস্থিতিতে, পাঠ্যটি ব্লকের পুরো প্রস্থ জুড়ে প্রসারিত হয় (আপনার সমস্ত নিবন্ধ চিত্রের সাথে থাকবে না)। পাঠ্য ব্লকের প্রস্থ কঠোরভাবে স্থির নয়। নীচে আমাদের ব্লক দেখতে কেমন হওয়া উচিত।

সঠিক সিদ্ধান্ত

টাস্ক বাস্তবায়ন করতে, আমরা দুটি ব্লক তৈরি করি: একটি চিত্রের জন্য, দ্বিতীয়টি পাঠ্যের জন্য। চিত্রের নীচে অন্যান্য উপাদান থাকতে পারে তা বিবেচনায় নিয়ে, আমরা চিত্রের জন্য একটি পৃথক ধারক তৈরি করি, অন্যথায় এটির প্রয়োজন হয় না, আপনি কেবল চিত্র ট্যাগে প্রয়োজনীয় শ্রেণী নির্ধারণ করতে পারেন।

এইচটিএমএল

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >পাঠ্য ব্লক

প্রদর্শন: ইনলাইন;

)

এটি পাঠ্যের জন্য একটি আদর্শ সমাধান যা একটি ছবি সহ একটি ব্লকের চারপাশে মোড়ানো হবে। এটি এই মত দেখাবে: পাঠ্যটিতে ভাসমান বস্তুর বৈশিষ্ট্য নির্ধারণের পরামর্শ দেওয়া বেশ যৌক্তিক হবে। না হলেমান সেট করুন

বস্তুর প্রস্থে আমরা নিম্নলিখিত চিত্রটি পাই

এই প্রভাব এড়াতে, আপনাকে কেবল পাঠ্য ব্লকের প্রস্থ নির্দিষ্ট করতে হবে, তবে এটি আমাদের কাজের শর্তগুলির সাথে সঙ্গতিপূর্ণ নয়।

পরবর্তী ভাল বিকল্পটি হবে মার্জিন-বাম সম্পত্তি ব্যবহার করা। যেহেতু একটি ব্লগের জন্য, সম্ভবত, এই ব্লকের সমস্ত ছবি আকারে একীভূত হবে, সমাধানটি নীতিগতভাবে খারাপ এবং কার্যকর নয়। যাইহোক, এটি শুধুমাত্র একটি বিশেষ ক্ষেত্রে, যেহেতু নিবন্ধে কোন ছবি না থাকলে, কেবল বাম দিকে একটি খালি স্ট্রিপ থাকবে। এটা আমাদের মানায় না। আমরা একটি সার্বজনীন সমাধান খুঁজছি! এবং সবচেয়ে সঠিক সমাধান, যেমন প্রায়ই ঘটে, সবচেয়ে সহজ। একটি পাঠ্য ব্লকের পছন্দসই বিন্যাস অর্জন করতে, আপনাকে মান সহ ওভারফ্লো সম্পত্তি অ্যাক্সেস করতে হবে. অনন্য ইন্টারনেট এক্সপ্লোরার সম্পর্কে ভুলবেন না. যথারীতি, তিনি দেখান এবং অতিরিক্ত মনোযোগ প্রয়োজন! আমাদের বুড়ো মানুষ যাতে স্বাভাবিকভাবে কাজ করতে পারে তার জন্য, আমরা টেক্সট ব্লকে ফ্লোট প্রপার্টি যোগ করি (ওভারফ্লো প্রোপার্টি অ্যাক্সেস করার পরে, একটি নির্দিষ্ট প্রস্থ নির্ধারণের প্রয়োজন হবে না)।

এইভাবে, আমরা সঠিক সমাধানে এসেছি, যা আমাদের কাজের শর্তগুলি বর্ণনা করা উপধারায় ছবিতে নির্দেশিত প্রভাবের দিকে নিয়ে যাবে।

ছবি ( ফ্লোট: বাম; /*মোড়ানো */ মার্জিন: 10px; /*সৌন্দর্যের জন্য বাহ্যিক প্যাডিং */প্রদর্শন: ইনলাইন; /* IE6 এর জন্য, যাতে বাম মার্জিন দ্বিগুণ না হয় */) পাঠ্য (ওভারফ্লো: লুকানো; ভাসা: বাম;)

পদ্ধতি এবং বিকল্প অসুবিধা

পদ্ধতির সরলতা এবং বহুমুখিতা থাকা সত্ত্বেও, যা ব্যবহার করে overflow: hidden, একটি অপূর্ণতা আছে. টেক্সট অংশে ড্রপ-ডাউন উপাদান ব্যবহার করা হলে সম্পত্তিটি আর তার কার্য সম্পাদন করবে না।

এই ক্ষেত্রে, আপনি পছন্দসই বিন্যাস কনফিগার করার জন্য একটি বিকল্প প্রয়োজন হবে. এই কৌশলটি সমন্বয়ের কার্যকারিতার উপর ভিত্তি করে করা হবে প্রদর্শন: টেবিল-সেল;. এই সমাধানটি ঠিক ততটাই কার্যকর, তবে প্রথম পদ্ধতির থেকে সরলতার দিক থেকে কিছুটা নিকৃষ্ট। এই পদ্ধতিতে কল করার সময়, আপনাকে ইন্টারনেট এক্সপ্লোরার পরিবেশে কাজ করার জন্য লেআউট সেট করতে হবে

img ( float: left; /* মোড়ানো সেট করুন */মার্জিন: 10px; /* সৌন্দর্যের জন্য ইন্ডেন্টেশন */প্রদর্শন: ইনলাইন; /* IE6 এর জন্য, যাতে বাম মার্জিন দ্বিগুণ না হয় */) পাঠ্য (প্রদর্শন: টেবিল-সেল; জুম: 1; /* সাবধানে! স্ট্রিংটি অবৈধ */ }

এবং এই সমাধানটির নিজস্ব বৈশিষ্ট্য রয়েছে যা লেআউটের সময় বিবেচনায় নেওয়া দরকার। পাঠ্য অংশটি যথেষ্ট ছোট হলে, পরবর্তী ব্লকটি পাঠ্য শ্রেণীর সাথে ব্লকের ডানদিকে প্রদর্শিত হবে। এটি এড়াতে, আপনাকে পাঠ্য ব্লক এবং চিত্রটিকে একটি পৃথক পাত্রে আবদ্ধ করতে হবে।

এটা কোন ব্রাউজারে কাজ করে?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-

একটি ছবি এবং পাঠ্য সমন্বিত একটি ব্লক তৈরি করুন এবং পাঠ্যটি ছবির চারপাশে প্রবাহিত হওয়া উচিত নয়।

বাম সঠিক, ডান নয়

অতিরিক্ত শর্ত: পাঠ্য বা চিত্রের প্রস্থ কঠোরভাবে সংজ্ঞায়িত করা হয় না। যদি কোন চিত্র না থাকে, পাঠ্যটি পুরো বরাদ্দকৃত প্রস্থ দখল করে।

সমাধান

চলুন শৈলী লিখতে চেষ্টা করা যাক. বাম কলাম দিয়ে সবকিছু পরিষ্কার:

ছবি ( ফ্লোট: বাম; /* মোড়ানো সেট করুন */ মার্জিন: 10px; /* সৌন্দর্যের জন্য ইন্ডেন্টেশন */ প্রদর্শন: ইনলাইন; /* IE6 এর জন্য, যাতে বাম ইন্ডেন্টেশন দ্বিগুণ না হয় */ )

এখন অঙ্কনটি বাম দিকে, এবং পাঠ্যটি ডানদিকে এটির চারপাশে যায়। তবে যদি আরও পাঠ্য থাকে তবে এটি অঙ্কনের নীচে "ডুব" হবে (উপরের ছবিটি দেখুন), এবং আমাদের এটির প্রয়োজন নেই।

প্রথম জিনিস যা মনে আসে তা হল পাঠ্যটিকে "ভাসানো"। কিন্তু এক্ষেত্রে প্রস্থ উল্লেখ না করলে লেখাটি ছবির নিচে পড়ে যাবে!

float: বাম/ডান প্রস্থ প্রয়োজন হবে - অন্যথায় কিছুই কাজ করবে না!

আমরা আরও চিন্তা করি... ভালো সিদ্ধান্তমনে হতে পারে বর্ণনা ( : XXXpx)। প্রকৃতপক্ষে, কিছু পরিস্থিতিতে এই বিকল্পটি কাজ করে। উদাহরণস্বরূপ, যদি ছবির আকার এখনও সেট করা থাকে। ধরা যাক এটি একটি রাবার নিউজ ব্লক। 200px বলুন, চিত্রটি আরও প্রশস্ত হতে পারে না, তবে পাঠ্যটি ইতিমধ্যেই প্রসারিত এবং সমগ্র অবশিষ্ট প্রস্থকে দখল করে।

যাইহোক, এই বিকল্প আছে উল্লেখযোগ্য অপূর্ণতা. যদি একটি ছবির সাথে কোন ব্লক না থাকে তবে ইন্ডেন্টেশনটি এখনও একটি বিশ্রী গর্ত থাকবে। অবশ্যই, নিবন্ধে বর্ণিত হিসাবে আপনি বোন উপাদান নির্বাচক ব্যবহার করে এটি সরাতে পারেন, তবে আমাদের ক্ষেত্রে অন্য সমাধান রয়েছে।

আপনি শুধু যোগ করে মোড়ানো প্রতিরোধ করতে পারেন :hidden; একটি পাঠ্য কলামের জন্য। এইভাবে আমরা তার জন্য প্রতিষ্ঠিত হবে নতুন প্রসঙ্গবিন্যাস (এই বিষয়টি শীঘ্রই আরও বিশদে কভার করা হবে)।

একমাত্র ব্রাউজার যা এটিতে ভুলভাবে প্রতিক্রিয়া জানাবে, অবশ্যই, IE6। আমরা এটির জন্য বিশেষভাবে কলাম সেট করি, উদাহরণস্বরূপ, "ফ্লোট" (আপনাকে প্রস্থ সেট করতে হবে না)।

সুতরাং, সমস্যার সমাধান এই মত দেখায়:

ছবি ( float: left; /* float সেট করুন */ margin:10px; /* সৌন্দর্যের জন্য ইন্ডেন্টেশন */ display:inline; /* IE6 এর জন্য, যাতে বাম ইন্ডেন্টেশন দ্বিগুণ না হয় */ ) .description( overflow:hidden ; ) * html .description( float:left; )

বরাবরের মতো, যুদ্ধের পরিস্থিতিতে আমরা ব্যবহার করি।