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

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

در جلسه‌ی چهارم از سری مقالات آموزشی CSS به ارائه‌ی اطلاعاتی درباره‌ی دستور 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 ایجاد کنید و کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.

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

گیت هاب با ابزار Copilot فرایند کدنویسی را ساده‌تر و سریع‌تر می‌کند

آموزش پاک کردن کش کروم و سایر مرورگرها

تغییر تاریخ و ساعت در ویندوز 11؛ رفع دقیق نبودن و تنظیم زمان با ساعت جهانی

ادغام چند فایل PDF | چگونه پی دی اف ها را یکی کنیم؟

آموزش ساخت اکانت مهمان در ویندوز 11