امروز : پنج شنبه ، ۲۷ مهر ۱۳۹۶
خانه / آموزش کامل CSS / آموزش کامل CSS – قسمت ۱۳: شناور کردن المان ها
آموزش سی اس اس

آموزش کامل CSS – قسمت ۱۳: شناور کردن المان ها

شناور کردن المان ها در css

شناور کردن المان ها یکی از مهمترین امکاناتی است که css در اختیار ما قرار می دهد. در css شما می توانید المان ها را به صورت شناور در آورید، این یعنی این که css به شما کمک می کند که المان ها را به راحتی و بدون دردسر در کنار هم و هر جای صفحه که دوست دارید به کار ببرید.

دستور float

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

 html code:

<div class=”matn”><img src=”آدرس عکس دلخواه“/> در اینجا یک متن دلخواه می نویسیم </div>

css code:

img {

float: right;

margin: 0 0 10px 10px; }

بدین صورت عکس در سمت راست متن شما و در یک سطر قرار می گیرد.

دستور clear

زمانی که شما یک المان را به حالت شناور در می آورید به بقیه المان ها اجازه می دهید که در کنار این المان قرار بگیرند. حال اگر بخواهید که المان های کنار دستی را به خط بعدی بفرستید و هیچ چیز مزاحم کار شما نشود باید از دستور clear یا تخلیه استفاده کنید. هر سمتی که این دستور را بدهید المان های آن سمت به خط بعدی منتقل خواهند شد. همچنین می توانید با مقدار both در این دستور المان های هر دو سمت را تخلیه کنید. به مثال زیر دقت کنید:

html code:

<h2> بدون استفاده از دستور تخلیه </h2>

<div class=”div1″>div1</div>

<div class=”div2″>div2 – در این حالت دیویژن دوم چون دستور تخلیه ندارد بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد </div>

<h2> با استفاده از دستور تخلیه </h2>

<div class=”div3″>div3</div>

div class=”div4″>div4 –  با استفاده از دستور تخلیه المان‌های شناور در طرف تخلیه شده به خط بعدی هول داده می‌شوند </div>

css code:

مثال را انجام دهید و نتیجه آن را مشاهده کنید. خواهید دید که div1 در div2 و div3 بالای div4 سمت چپ قرار می گیرد.

درباره ما admin

محمد صفری : مدیر پردیس وردپرس ، مهندس نرم افزار و طراح سایت

این موارد رو هم بررسی کنید

آموزش سی اس اس

آموزش کامل CSS – قسمت یازدهم: موقعیت المان ها

در این قسمت از آموزش css با امکان جابجا کردن المان ها در صفحات وب به …

پاسخ دهید