زنگ CSS: جلسه سیزدهم - شناوری المان‌ها

زنگ CSS: جلسه سیزدهم - شناوری المان‌ها

یکی از مهمترین امکاناتی که سی اس اس به شما می‌دهد شناور کردن المان‌ها در صفحه است. حالا اینکه منظور از شناوری المان‌ها چیست و چگونه می‌توانیم از آن استفاده کنیم موضوعی است که در ادامه مطلب بدان خواهیم پرداخت. با ما همراه باشید.

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

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

HTML

<div class="matn"><img src="http://zoomit.ir/ax.png" />اینجا یک متن نمونه قرار می‌گیرد. فرض کنید می‌خواهید در کنار متن نمونه‌ی خود یک عکس قرار بدهید. برای اینکه عکس و متن و به طور کلی دو المان در یک خط قرار بگیرند باید از قابلیت شناوری یا همان float استفاده کرد. </p>

CSS

 

img {
    float: right;
    margin:  0 0 10px 10px;
}

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

دستور تخلیه: clear

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

div {
    clear: left;
}

به مثال زیر دقت کنید:

HTML

<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

.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}

.div2 {
border: 1px solid red;
}


.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}

.div4 {
border: 1px solid red;
clear: left;
}

 

 div1

div2 - در این حالت دیویژن دوم چون دستور تخلیه ندارد پس بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد.

 

div3

div4 -در این حالت چون دیویژن ۴ دارای دستور تخلیه است به خط بعدی هول داده می‌شود

 

از سراسر وب

  دیدگاه
کاراکتر باقی مانده

بیشتر بخوانید