زنگ CSS: جلسه چهاردهم – دستور display و مقادیر آن


گاهی پیش می‌آید که قصد قرار دادن دو المان از نوع بلاک (اگر کلمه بلاک یادتان نمی‌آید در مطلب یک یادآوری از این موضوع داشته‌ایم) در یک ردیف را داشته باشیم. این جور مواقع کار کمی مشکل می‌شود؛ ولی ما در این بخش با کمک دستور display به سادگی هر چه تمام تر این کار را انجام خواهیم داد. اگر می‌خواهید مثل ما این کار رابه سادگی آب‌ خوردن انجام دهید، با ما در ادامه مطلب همراه شوید. 

دستور inline block چه کاربردی دارد؟

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

نام: display

این دستور چه کاری انجام می‌دهد؟‌ نحوه‌ی نمایش المان‌های شما رامشخص می‌کند. ما در این دوره فقط با مقدار  inline-block کار داریم که المان‌های اچ تی ام ال در یک خط و در کنار هم می‌آورد. 

چه چیزهایی را در مقابلش بنویسیم؟ در این آموزش فقط با مقادیر خطی کردن یعنی inline-block کار داریم. 

نمونه‌ی نوشتن این دستور: display: inline-block

HTML

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

CSS

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

 

جعبه‌های شناور

جعبه‌های شناور

جعبه‌های شناور

جعبه‌های شناور

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

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

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

زنگ CSS: جلسه چهاردهم – دستور display و مقادیر آن

پاسخ دهید

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>