تعلم التصميم باستخدام CSSيمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة.
.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 في هذه الحالة. جميل!
ينبغي عليك الاطلاع على بعض الأمور الإضافية في أمور دعم إنترنت إكسبلورر 6، و7 لخاصية inline-block. انظر الروابط السابقة لمعرفة كيفية دعم المتصفحات القديمة مثل IE6 و IE7. عدا ذلك؛ دعنا نكمل!.