CSS-এ ফ্লোটের প্যারেন্টে টেক্সট

চলুন ডিভের জন্য height প্রপার্টি সরিয়ে দেই এবং ছবির আগে একটি ছোট টেক্সট রাখি।

এই ক্ষেত্রে আমাদের ডিভের উচ্চতা হবে টেক্সটের উচ্চতার সমান, এবং ছবিটি এখনও ডিভের বাইরে বেরিয়ে থাকবে:

html<div>
  text
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

চলুন ছবির পরে টেক্সট রাখি - ফলাফল অপরিবর্তিত থাকবে:

html<div>
  <img src="img.png" alt="">
  text
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

চলুন ছবিটি যেন বাম দিকে ভাসে সেভাবে করি - ফলাফল একই রকম হবে:

html<div>
  <img src="img.png" alt="">
  text
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

চলুন নীচে আরও একটি ডিভ যোগ করি - ছবিটি তার উপরেও চেপে বসবে:

html<div>
  <img src="img.png" alt="">
  text
</div>
<div>
  text
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

যদি প্রথম ডিভে এত বেশি টেক্সট যোগ করা হয় যে এটি উচ্চতায় ছবির চেয়ে বড় হবে - এটি দ্বিতীয় ডিভের উপর চেপে বসবে না:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  text
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

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