راست چین کردن قالب – پردیس وردپرس

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

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

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

css code:

.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 سمت چپ قرار می گیرد.