مالکیت شناور

چیدمان با مالکیت شناور :

همان طور که قبلا گفته شد عناصر در html دو نوع هستند inline یا block که شما می توانید سبک نمایش آن ها را با display تغییر دهید.
css-float
یادآوری :

عناصر inline درون یک خط در ادامه یکدیگر قرار گرفته و به اندازه محتوای خود فضا در نظر می گیرند.
عناصر block هر کدام یک خط برای خود صرف نظر از محتوایشان در نظر می گیرند.

همه عناصر به صورت پیش فرض دارای خصوصیت float:none هستند. با float:Inherit مشخص می کنیم که عنصر از والد خود پیروی کند.

مالکیت شناور به شما این امکان را می دهد که چند عنصر block را در یک خط قرار دهید، برای این کار کافیست :

1. عرض آن ها را طوری قرار دهید که مجموع آن ها در یک خط قرار بگیرد.
2.سپس صفت float را برای آن ها با left یا right مقدار دهی کنید.

در زیر شما می بینید که عناصر در کنار یکدیگر قرار می گیرند با اینکه آنها block هستند.


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


html
<div style=”width:25%”></div>
<div style=”width:35%”></div>
<div style=”width:40%”></div>
style:
none float
div{height:20px}
left float
div{height:20px;float:left}


مـــهم خصوصیت float با خصوصیت position absolute تفاوت دارد . یک عنصر با خصوصیت absolute از جریان چیدمان صفحه جدا خواهد شد . در صورتی که در خاصیت float عنصر از جریان صفحه پیروی خواهد کرد و با توجه به چیدمان اطراف خود تغییر موقعیت خواهد داد .

مـــهم این روش خوب و معمول برای چیدمان عناصر بوده و بسیاری از آن برای بخش بندی سند خود استفاده می کنند. اما توصیه می کنیم برای استفاده از آن خاصیت clear را نیز به خوبی مطالعه نمایید.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

دیدگاهتان را بنویسید

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