یادگیری پیکربندی با CSS
می‌توان یک جدول از جعبه‌ها ساخت، به طوری که صفحه ی مرورگر را به شکل افقی پر می‌کنند. این کار را برای مدت طولانی فقط با استفاده از float انجام می‌دادند، اما هم اکنون با inline-block راحت تر هم شده است! در مثال زیر هر دوی این روش‌ها را بررسی می‌کنیم.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من شناور هستم!
</div>من از clear استفاده می‌کنم تا در کنار جعبه‌های بالا چیده نشوم
</div>
با استفاده از قرار داده inline-block به عنوان مقدار برای display می‌توان به همان نتیجه رسید.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>من یک بلاک درون خطی هستم!
</div>
دیگر نیازی ندارم که از clear استفاده کنم! چه خوب!
برای بررسی‌ها بیشتر باید به IE6 and IE7 support، قسمت inline-block سر بزنید. بعضی وقت‌ها از inline-block به hasLayout یاد می‌شود، پس شما فقط نیاز دارید که از پشتیبانی آن در مرورگر‌های قدیمی آگاه شوید. اگر می‌خواهید، لینک قبلی در رابطه با IE6 و IE7 را دنبال کنید.در غیر این صورت پیش می‌رویم!
