تعلم التصميم باستخدام 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. عدا ذلك؛ دعنا نكمل!.
