CSSطراحی سایتگوناگون

۱۹-خاصیت float در CSS

به کمک خصوصیت float میتوان یک عنصر را به سمتی حرکت داد تا دیگر عناصر اطراف آن را بپوشانند.

 

 

چگونه یک عنصر را شناور کنیم؟

  • عناصر فقط در جهت محور X (افقی) میتوانند جابجا شوند(به سمت چپ و یا راست بروند-float)
  • عناصری که بعد از float می ایند،اطراف آن را خواهند گرفت.(عناصری که قبل از float می ایند تاثیری ندارند)

 

حرکت دادن عکس به سمت راست و آمدن متن سمت چپ آن

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

float کردن عناصر یکی پس از دیگری

 

اگر قطعه کد زیر را خودتون تست کنید،خواهید دید که در صورت وجود فضای خالی عناصر یکی پس از دیگری درکنار هم قرار میگیرند.گالری تصاویر زیر نمونه ای از این تعریف ما میباشد.

 

 


 

استفاده ار خاصیت clear

 

عناصری که بعد از یک عنصر float شده قرار دارند، اطراف آنرا خواهند گرفت. برای اجتناب از این موضوع از خصوصیت clear استفاده کنید.در مثال زیر یک متن به گالری اضافه شده و از خصوصیت clear برای آن استفاده کرده ایم.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

مثال های بیشتر

 

قرار دادن یک عکس همراه با عنوان آن داخل تگ div و حرکت دادن به سمت راست

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

style دادن به عنصر موردن با کمک span

به عنوان مثال فقط استایل دهی را برای شما ذکر میکنیم:

 


 

ساخت منوی افقی

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

 

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن