inline-block

يمكنك إنشاء شبكة من المربعات التي تملأ عرض المتصفح وتلتف حول بعضها بشكل جيد. كان ذلك ممكن في السابق باستخدام خاصية float، لكن الآن سنستخدم خاصية inline-block، وستكتسف أنها أسهل بكثير. العناصر التي تملك خاصية inline-block هي بالضبط كالعناصر التي تحمل خاصية inline، مع فرق أن العناصر الأولى يمكن أن تأخذ طولًا، وعرضًا محددين. لنلق نظرة على مثالين يشرحان كل طريقة على حدة.

الطريقة الصعبة (استخدام 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>

ينبغي عليك الاطلاع على بعض الأمور الإضافية في أمور دعم إنترنت إكسبلورر 6، و7 لخاصية inline-block. انظر الروابط السابقة لمعرفة كيفية دعم المتصفحات القديمة مثل IE6 و IE7. عدا ذلك؛ دعنا نكمل!.

  • Creative Commons License