آموزش CSS – آشنایی با Property یی تحت عنوان float در سی اس اس (CSS) (جلسه ۳۳)

برای آنکه بتوانیم جایگاه عناصر قرار گرفته روی صفحه را به راست یا چپ منتقل کنیم، می بایست از Attribute یی تحت عنوان float استفاده کنیم. برای این Attribute مقادیری همچون right، left، none و inherit می توان استفاده کرد.
همانطور که پیش از این اشاره شد، تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته شوند روی مرورگر به نمایش در خواهند آمد. برای درک این موضوع کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <div id="square1"></div>
       <div id="square2"></div>
       <div id="square3"></div>
   </body>
</html>

به طور خلاصه سه تگ از جنس <div> تحت عناوین square2، square1 و square3 ایجاد کرده ایم. در ادامه با نوشتن کدهای سی اس اس (CSS) قصد داریم تا مفهوم float را توضیح دهیم:

#square1 {
   width:100px;
   height:100px;
   background-color:black;
}
#square2 {
   width:100px;
   height:100px;
   background-color:orange;
}
#square3 {
   width:100px;
   height:100px;
   background-color:gray;
}

همانطور که مشخص است برای هر یک از تگ ها ابعاد و یک رنگ مجزا در نظر گرفته ایم. حال فایل خود را داخل مرورگر اجرا می کنیم:

css_float

می بینیم که تگ ها به همان ترتیبی که نوشته شده اند به نمایش در آمده اند. حال کدهای سی اس اس (CSS) را به صورت زیر بازنویسی می کنیم:

#square1 {
   width:100px;
   height:100px;
   background-color:black;
}
#square2 {
   width:100px;
   height:100px;
   background-color:orange;
   float:right;
}
#square3 {
   width:100px;
   height:100px;
   background-color:gray;
}

همانطور که در کد فوق می بینیم، برای square2 یک Attribute تحت عنوان float در نظر گرفته و مقدار آن را برابر با right در نظر گرفته ایم. از این پس این تگ تا جاییکه بتواند به سمت راست خواهد رفت. از آنجا که پس از انتقال این تگ به سمت راست جای آن خالی می شود، تگ square3 جای آن قرار خواهد گرفت. برای مشاهده نتیجه، مجدد مرورگر را به روز رسانی می کنیم:

2-css_float

مجدد کدهای سی اس اس (CSS) را به صورت زیر بازنویسی می کنیم:

#square1 {
   width:100px;
   height:100px;
   background-color:black;
   float:right;
}
#square2 {
   width:100px;
   height:100px;
   background-color:orange;
   float:right;
}
#square3 {
   width:100px;
   height:100px;
   background-color:gray;
   float:right;
}

همانطور که در کد فوق می بینیم، دستور float را برای هر سه تگ در نظر گرفته ایم و مقدار آن را هم برابر با right قرار می دهیم. حال مجدد مرورگر را به روز رسانی می کنیم:

3-css_float

می بینیم که کلیه تگ های به سمت راست انتقال پیدا کرده و درکنار یکدیگر قرار می گیرند. یکی از تکنیک هایی که از آن طریق می توان اقدام به ساخت منو کرد همین روش است به این صورت که تعدادی تگ را کنار یکدیگر قرار داده و کلیه آنها را به سمت راست یا چپ float می کنیم.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان