زنگ CSS: جلسه چهاردهم - دستور display و مقادیر آن
در جلسهی چهارم از سری مقالات آموزشی CSS به ارائهی اطلاعاتی دربارهی دستور display میپردازیم.
دستور inline block چه کاربردی دارد؟
همانطور که میدانید المانهای اچتیال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال میکند. کلمه بلاک در واقع برای المانهایی مثل
یا
نام: display
این دستور چه کاری انجام میدهد؟ نحوهی نمایش المانهای شما رامشخص میکند. ما در این دوره فقط با مقدار inline-block کار داریم که المانهای اچ تی ام ال در یک خط و در کنار هم میآورد.
چه چیزهایی را در مقابلش بنویسیم؟ در این آموزش فقط با مقادیر خطی کردن یعنی inline-block کار داریم.
نمونهی نوشتن این دستور: display: inline-block
HTML
جعبههای شناور
جعبههای شناور
جعبههای شناور
جعبههای شناور
CSS
.floating-box { display: inline-block; width: 150px; height: 75px; margin: 10px; border: 3px solid #8AC007;}
جعبههای شناور
جعبههای شناور
جعبههای شناور
جعبههای شناور
همانطور که در مثال بالا مشاهده میکنید، بعد از استفاده از دستور inline-block دیویژنهای ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند.
تمرین: برای اینکه نشان دهید چقدر با جلسه امروز توانستهاید ارتباط برقرار کنید، یک لیست بدون نظم unorderd list ایجاد کنید و کاری کنید که آیتمهای لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.
راهنمایی: اگر نمیدانید قضیه از چه قرار است راهنمایی کوچکی میکنیم. المان لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور بخصوصی استفاده میکردیم. باقی این موضوع را دیگر خودتان میدانید!
نظرات