بأمكانك انشاء شبكة من الصناديق التي تمتد بعرض شاشة المتصفح وأيضا تلتف ﻷسفل بشكل جميل.  كنا نفعل ذلك لوقت طويل باستخدام التعويم float ويكن اﻵن مع inline-block أصبح الموضوع سهلا يسيرا.

أن عناصر inline-block مثل العناصر السطرية inline لكن لها عرض وطول ، تعال نري كلا المدخلين فى اﻻمثلة التالية:

اولا: الطريقة الصعبة(بأستخدام التعويم float)

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

شرح inline-block عرض كمربعات علي السطر

شرح inline-block عرض كمربعات علي السطر

الطريقة السهلة (استخدام inline-block):

بأمكانك الحصول علي نفس التخطيط والتصميم السابق باستخدام قيمة inline-block في خاصية display :

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}
شرح inline-block عرض كمربعات علي السطر
شرح inline-block عرض كمربعات علي السطر

شرح inline-block عرض كمربعات علي السطر

بأ يجب عليك القيام بمزيد من المجهود لدعم  IE6 و IE7 خاصية inline-block . هنا بعض مصممي الويب يطلقون علي inline-block لقب haslayout ، ان فقط بحاجة الى معرفة كيفية دعم المتصفحات القديمة. اتبع الرابط السابق اذا كنت مهتما بتعلم المزيد، ان لم فواصل مع الدروس.

رابط مختصر : https://www.aqwce.com/9jIbv