ফ্লটিং দ্বারা প্যারাগ্রাফে ইমেজের অবস্থান নির্দেশ
ফ্লোটিং দ্বারা যে ওয়েব পেজের div তথা আয়তাকার খন্ড সমূহ এর অবস্থা নির্ধারণ করা হয় এমনটা নয়, আমরা যখন ওয়েব পেজে কনটেন্ট যুক্ত করি তখন প্যারাগ্রাফের মধ্যে ডানে বা বামে ইমেজ ব্যবহার করে থাকি এক্ষেত্রেও ফ্লোটিং ব্যবহার করা হয়ে থাকে।কোন ইমেজকে যদি কোন প্যারাগ্রাফের সর্ববামে স্থাপন করতে হয় তাহলে প্রথমে ইমেজ ট্যাগ রাখতে হবে এবং তারপর প্যারাগ্রাফ রাখতে হবে এবং শুধুমাত্র ইমেজ ট্যাগের স্ট্যাইল সিটে লেখতে হবে img{float:left;}।অনুরূপভাবে কোন ইমেজকে প্যারাগ্রাফের সর্বডানে স্থাপন করার প্রয়োজন হয় তাহলেও প্রথমে ইমেজ রেখে ইমেজ ট্যাগের স্ট্যাইল সিটে লেখতে হবে img{float:right;}।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align:justify;}
div{width:380px;
margin:3px;
border:#F99 10px solid;
padding:8px;
background:#ddEFB3;
outline:#F60 1px solid;}
img{width:150px; height:150px;
margin:5px;
border:#C30 1px solid;}
#second{float:left;}
#right{float:right;}
#left{float:left;}
</style>
</head>
<body >
<div id="second">
<h2 style="color:#C33;">Main Content</h2>
<hr>
<img id="right" src="https://tutorialbd.com/css/images/pic/22hh.png" width="150px" height="150px" />
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p><br />
<img id="left" src="https://tutorialbd.com/css/images/pic/22hh.png" />
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত