inline-block

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

راه سخت با استفاده از float

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="box">

من شناور هستم!

</div>
<div class="after-box">

من از clear استفاده می‌کنم تا در کنار جعبه‌های بالا چیده نشوم

</div>

راه راحت تر، استفاده از inline-block

با استفاده از قرار داده inline-block به عنوان مقدار برای display می‌توان به همان نتیجه رسید.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div class="box2">

من یک بلاک درون خطی هستم!

</div>
<div>

دیگر نیازی ندارم که از clear استفاده کنم! چه خوب!

</div>

برای بررسی‌ها بیشتر باید به IE6 and IE7 support، قسمت inline-block سر بزنید. بعضی وقت‌ها از inline-block به hasLayout یاد می‌شود، پس شما فقط نیاز دارید که از پشتیبانی آن در مرورگر‌های قدیمی آگاه شوید. اگر می‌خواهید، لینک قبلی در رابطه با IE6 و IE7 را دنبال کنید.در غیر این صورت پیش می‌رویم!

  • Creative Commons License