آموزش کامل CSS – قسمت 14: دستور display

توسط با بدون دیدگاه آموزش کامل CSS

دستور display در css

گاهی اوقات پیش می‌آید که قصد قرار دادن دو المان از نوع بلاک در یک ردیف را داشته باشیم. در این مواقع کار کمی مشکل می شود که ما در این جلسه از آموزش با کمک دستور display این کار را انجام می دهیم.

دستور display نحوه نمایش المان ها را مشخص می کند.

مقدار inline block

همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع به المان‌هایی مثل <p> یا <div> اطلاق می‌شود. این المان‌ها هیچ چیز دیگری را در کنار خود جای نمی‌دهند. در جلسه قبل ما با استفاده از خاصیت شناور float المان ها در کنار یکدیگر قرار دادیم. امروز با استفاده از display و inline block تمامی المان ها را در یک سطر و کنار یکدیگر قرار می دهیم.

مقدار inline block المان ها را در یک خط کنار هم قرار می دهد. در مثال زیر 4 جعبه شناور را در کنار یکدیگر قرار می دهیم:

<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>

css code

.floating-box {
    display: inline-block;
    width:  150px;
     height:  75px;
     margin:  10px;
     border:  3px solid #8AC007;
}

خروجی مثال به صورت زیر نمایش داده می شود:

سی اس اس 14

همان طور که مشاهده می کنید بعد از استفاده از دستور inline-block دیو های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند.

برای تمرین یک لیست بدون نظم unorderd list ایجاد کنید و  کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.

راهنمایی: المان‌ لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور خاصی استفاده می‌کردیم.

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

توسط با بدون دیدگاه آموزش کامل 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 {
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 سمت چپ قرار می گیرد.